import { ArrowLeft, Eye } from "lucide-react";
import { Link } from "react-router-dom";
import { format, parseISO } from "date-fns";
import { fr } from "date-fns/locale";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Trip } from "@/types";

export function TripWorkspaceHeader({ trip }: { trip: Trip }) {
  const dates = `${format(parseISO(trip.startDate), "d MMM", { locale: fr })} – ${format(parseISO(trip.endDate), "d MMM yyyy", { locale: fr })}`;
  const publishedCount = trip.steps.filter((step) => step.isPublished).length;
  return <header className="border-b bg-card/95 px-4 py-3 backdrop-blur sm:px-6 lg:px-8">
    <div className="mx-auto max-w-[1320px]">
      <Link to="/dashboard/trips" className="inline-flex min-h-11 items-center gap-2 text-sm text-muted-foreground hover:text-foreground"><ArrowLeft className="h-4 w-4" />Voyages</Link>
      <div className="flex flex-col gap-3 pb-2 sm:flex-row sm:items-end sm:justify-between"><div><div className="flex flex-wrap items-center gap-3"><h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">{trip.title}</h1><Badge variant="outline" className={publishedCount ? "status-success" : "status-neutral"}>{publishedCount ? `${publishedCount} étape${publishedCount > 1 ? "s publiées" : " publiée"}` : "Programme non partagé"}</Badge></div><p className="mt-1 text-sm text-muted-foreground">{trip.destination} · {dates}</p></div><Button asChild variant="outline" className="w-full shrink-0 sm:w-auto"><Link to={`/dashboard/trips/${trip.id}/preview`}><Eye className="mr-2 h-4 w-4" />Aperçu voyageur</Link></Button></div>
    </div>
  </header>;
}