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

const DEFAULT_BANNER_IMAGE = "https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80";

interface TripHeaderProps {
  title: string;
  destination: string;
  startDate: string;
  endDate: string;
  bannerUrl?: string;
  coverUrl?: string; // Ajout du prop coverUrl
  isPlanner?: boolean;
  onAddStep?: () => void;
  onAddDocument?: () => void;
  onEdit?: () => void;
}

export function TripHeader({
  title,
  destination,
  startDate,
  endDate,
  bannerUrl,
  coverUrl, // Utilisation du prop coverUrl
  isPlanner = false,
  onAddStep,
  onAddDocument,
  onEdit
}: TripHeaderProps) {
  // Utiliser coverUrl comme bannière si bannerUrl n'est pas défini
  const bannerImageUrl = bannerUrl || coverUrl || DEFAULT_BANNER_IMAGE;

  return (
    <div className="relative mb-12">
      {/* Banner Image with Overlay */}
      <div className="relative h-52 w-full overflow-hidden rounded-lg mb-4">
        <img
          src={bannerImageUrl}
          alt={`Bannière pour ${title}`}
          className="absolute inset-0 w-full h-full object-cover"
          onError={(e) => {
            // En cas d'erreur de chargement, utiliser l'image par défaut
            const target = e.target as HTMLImageElement;
            console.warn("Erreur de chargement d'image de bannière:", target.src);
            target.src = DEFAULT_BANNER_IMAGE;
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/70"></div>

        {/* Content on top of the banner */}
        <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
          <div className="flex items-start justify-between">
            <div>
              <h1 className="text-3xl font-bold mb-1">{title}</h1>
              <p className="text-lg font-medium mb-1">{destination}</p>
              <p className="text-sm opacity-90">
                Du {format(new Date(startDate), "d MMMM yyyy", { locale: fr })} au{" "}
                {format(new Date(endDate), "d MMMM yyyy", { locale: fr })}
              </p>
            </div>

            {isPlanner && (
              <div className="flex gap-2">
                <Button variant="outline" size="sm" onClick={onEdit} className="bg-white/20 border-white/40 backdrop-blur-sm hover:bg-white/30">
                  <Edit className="h-4 w-4 mr-1" />
                  Modifier
                </Button>
                <Button variant="outline" size="sm" onClick={onAddDocument} className="bg-white/20 border-white/40 backdrop-blur-sm hover:bg-white/30">
                  <Plus className="h-4 w-4 mr-1" />
                  Document
                </Button>
                <Button onClick={onAddStep} className="bg-white text-black hover:bg-white/90">
                  <Plus className="h-4 w-4 mr-1" />
                  Étape
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}