import { twMerge } from 'tailwind-merge';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import CloseButton from '@/components/button/CloseButton';
import { ChevronLeftIcon } from '@/icons';

export const ModalHeader = ({
  onClose,
  title,
  subtitle,
  onBack,
  className,
  titleGroupClassName,
  titleClassName,
  children,
}: {
  onClose?: () => void;
  title: string;
  subtitle?: string;
  onBack?: () => void;
  className?: string;
  /** Optional className to override the title styling */
  titleGroupClassName?: string;
  /** Optional className to override the title styling */
  titleClassName?: string;
  /** Optional content rendered on the right side of the header, before the close button */
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={twMerge(
        'flex flex-row items-center justify-between gap-4 px-4 pt-6 pb-2 md:px-6',
        className
      )}
    >
      {/* Left side - back button or spacer */}
      <div className='flex items-center'>
        {onBack ? (
          <Button
            variant={ButtonVariant.Standard}
            onClick={onBack}
            icon={ChevronLeftIcon}
            shape={ButtonShape.Pill}
          />
        ) : null}
      </div>

      {/* Center - title and subtitle */}
      <div
        className={twMerge('flex flex-1 flex-col gap-1', titleGroupClassName)}
      >
        <div className={twMerge('font-serif text-2xl', titleClassName)}>
          {title}
        </div>
        {subtitle && (
          <div className='text-xs text-foreground-inactive'>{subtitle}</div>
        )}
      </div>

      {/* Right side - children and close button */}
      <div className='flex items-center justify-end gap-2'>
        {children}
        {onClose ? <CloseButton onClick={onClose} /> : null}
      </div>
    </div>
  );
};

export default ModalHeader;