import { ReactNode } from 'react';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';

interface HeaderProps {
  title: string;
  subtitle?: string;
  showBackButton?: boolean;
  rightElement?: ReactNode;
  className?: string;
}

const Header = ({
  title,
  subtitle,
  showBackButton = false,
  rightElement,
  className
}: HeaderProps) => {
  const navigate = useNavigate();

  return (
    <header className={cn("px-4 py-6", className)}>
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          {showBackButton && (
            <button
              onClick={() => navigate(-1)}
              className="mr-3 p-1.5 rounded-full bg-secondary hover:bg-secondary/80 transition-colors"
            >
              <ArrowLeft size={18} />
            </button>
          )}
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
            {subtitle && <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>}
          </div>
        </div>
        {rightElement && <div>{rightElement}</div>}
      </div>
    </header>
  );
};

export default Header;