import React from "react";
import styles from "./dash-page-header.module.scss";

interface DashboardHeaderProps {
  title: string;
  description?: string;
  actionButton?: {
    label: string;
    onClick?: () => void;
    href?: string;
  };
}

const DashboardHeader: React.FC<DashboardHeaderProps> = ({
  title,
  description,
  actionButton,
}) => {
  return (
    <div className={styles.header}>
      <div className={styles.header__text}>
        <h1>{title}</h1>
        {description && <p>{description}</p>}
      </div>

      {actionButton && (
        <div className={styles.header__btn}>
          {actionButton.href ? (
            <a href={actionButton.href}>{actionButton.label}</a>
          ) : (
            <button onClick={actionButton.onClick}>
              {actionButton.label}
            </button>
          )}
        </div>
      )}
    </div>
  );
};

export default DashboardHeader;