import type { FC, ReactNode } from 'react';
import { cn } from '../../lib/utils';

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  children?: ReactNode;
  className?: string;
}

export const PageHeader: FC<PageHeaderProps> = ({ title, subtitle, children, className }) => {
  return (
    <div
      className={cn(
        'flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6',
        className
      )}
    >
      <div>
        <h2 className="font-heading text-2xl sm:text-3xl text-theme-heading">{title}</h2>
        {subtitle && <p className="text-sm text-theme-muted mt-1">{subtitle}</p>}
      </div>
      {children && <div className="flex items-center gap-2 shrink-0">{children}</div>}
    </div>
  );
};

export default PageHeader;
