import { Button } from '../Button';
import { IconAdd } from '../icons';
import styles from './PageHeader.module.scss';

export interface PageHeaderProps {
  /** Page title */
  title: string;
  /** Optional subtitle/description below the title */
  subtitle?: string;
  /** Show primary action button */
  showPrimaryAction?: boolean;
  /** Primary action button text */
  primaryActionText?: string;
  /** Primary action click handler */
  onPrimaryAction?: () => void;
  /** Primary action button icon */
  primaryActionIcon?: React.ReactNode;
  /** Show secondary action button */
  showSecondaryAction?: boolean;
  /** Secondary action button text */
  secondaryActionText?: string;
  /** Secondary action click handler */
  onSecondaryAction?: () => void;
  /** Secondary action button icon */
  secondaryActionIcon?: React.ReactNode;
  /** Toolbar content (search, filters, etc.) rendered in the title row */
  toolbar?: React.ReactNode;
  /** Additional CSS classes */
  className?: string;
}

export const PageHeader = ({
  title,
  subtitle,
  showPrimaryAction = false,
  primaryActionText = 'Add',
  onPrimaryAction,
  primaryActionIcon = <IconAdd size={14} />,
  showSecondaryAction = false,
  secondaryActionText,
  onSecondaryAction,
  secondaryActionIcon = <IconAdd size={14} />,
  toolbar,
  className = '',
}: PageHeaderProps) => {
  const containerClassName = [styles.container, className].filter(Boolean).join(' ');

  return (
    <div className={containerClassName}>
      <div className={styles.titleRow}>
        <div className={styles.titleContainer}>
          <h1 className={styles.title}>{title}</h1>
          {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
        </div>
        <div className={styles.actions}>
          {toolbar}
          {showSecondaryAction && (
            <Button
              variant="secondary"
              size="small"
              leadingIcon={secondaryActionIcon}
              onClick={onSecondaryAction}
              className={styles.actionButton}
            >
              {secondaryActionText}
            </Button>
          )}
          {showPrimaryAction && (
            <Button
              variant="primary"
              size="small"
              leadingIcon={primaryActionIcon}
              onClick={onPrimaryAction}
              className={styles.actionButton}
            >
              {primaryActionText}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};