import { Badge } from '@/components/ui/badge';
import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';

interface PageHeaderProps {
  icon: LucideIcon;
  title: string;
  description: string;
  badge?: {
    value: string | number;
    label: string;
    loading?: boolean;
  };
  actions?: ReactNode;
  testId?: string;
}

export function PageHeader({
  icon: Icon,
  title,
  description,
  badge,
  actions,
  testId = 'page-header'
}: PageHeaderProps) {
  return (
    <div 
      className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6"
      data-testid={testId}
    >
      <div className="space-y-1 sm:space-y-2">
        <div className="flex items-center gap-2 sm:gap-3">
          <div 
            className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center shadow-lg"
            data-testid={`${testId}-icon-container`}
          >
            <Icon 
              className="w-5 h-5 sm:w-6 sm:h-6 text-white"
              data-testid={`${testId}-icon`}
            />
          </div>
          <div>
            <h1 
              className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900"
              data-testid={`${testId}-title`}
            >
              {title}
            </h1>
            <p 
              className="text-sm sm:text-base text-gray-600"
              data-testid={`${testId}-description`}
            >
              {description}
            </p>
          </div>
        </div>
      </div>
      
      <div className="flex items-center gap-2 sm:gap-3">
        {badge && (
          <Badge 
            variant="secondary" 
            className="text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 bg-slate-100 text-slate-800 font-semibold"
            data-testid={`${testId}-badge`}
          >
            {badge.loading ? 'Loading…' : badge.value}
            <span className="hidden sm:inline ml-1">{badge.label}</span>
          </Badge>
        )}
        {actions}
      </div>
    </div>
  );
}

