import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { CalendarDays, Eye, Plus, Users } from "lucide-react";
import { Button } from "@/components/ui/button";

const FALLBACK = "/placeholder.svg";

interface TripHeaderProps {
  title: string; destination: string; startDate: string; endDate: string;
  bannerUrl?: string; coverUrl?: string; isPlanner?: boolean;
  onAddStep?: () => void; onInvite?: () => void; membersCount?: number;
}

export function TripHeader({ title, destination, startDate, endDate, bannerUrl, coverUrl, isPlanner = false, onAddStep, onInvite, membersCount = 0 }: TripHeaderProps) {
  const imageUrl = bannerUrl || coverUrl || FALLBACK;
  return <section className="surface-card flex flex-col gap-5 p-4 sm:flex-row sm:items-center sm:p-5">
    <img src={imageUrl} alt={`Vue de ${destination}`} className="h-28 w-full rounded-xl object-cover sm:h-32 sm:w-36" onError={(event) => { event.currentTarget.src = FALLBACK; }} />
    <div className="min-w-0 flex-1"><p className="text-xs font-bold uppercase tracking-[0.16em] text-primary">{destination}</p><h1 className="mt-1 truncate text-2xl font-bold text-secondary sm:text-3xl">{title}</h1><div className="mt-3 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground"><span className="flex items-center gap-2"><CalendarDays className="h-4 w-4" />{format(new Date(startDate), "d MMM", { locale: fr })} – {format(new Date(endDate), "d MMMM yyyy", { locale: fr })}</span><span className="flex items-center gap-2"><Users className="h-4 w-4" />{membersCount} voyageur{membersCount > 1 ? "s" : ""}</span></div></div>
    {isPlanner ? <div className="grid shrink-0 gap-2 sm:w-52"><Button variant="outline" onClick={onInvite}><Users className="mr-2 h-4 w-4" />Inviter un voyageur</Button><Button variant="sunset" onClick={onAddStep}><Plus className="mr-2 h-4 w-4" />Ajouter une étape</Button></div> : <Button variant="outline" className="w-full sm:w-auto"><Eye />Voir le programme</Button>}
  </section>;
}