import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Document } from "../../../types";
import { DocumentItem } from "../DocumentItem";

interface TripDocumentsProps {
  documents: Document[];
  tripId: string;
  isPlanner: boolean;
}

export function TripDocuments({
  documents,
  tripId,
  isPlanner,
}: TripDocumentsProps) {
  const generalDocuments = documents.filter((document) => !document.stepId);
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex justify-between items-center text-left">
          <span>Documents généraux du voyage</span>
          <Badge variant="outline" className="ml-2">
            {generalDocuments.length}
          </Badge>
        </CardTitle>
        <p className="text-sm text-muted-foreground">
          {isPlanner
            ? "Ajoutez ici les documents utiles au voyage. Les Voyageurs autorisés pourront les consulter."
            : "Retrouvez ici les documents partagés pour votre voyage."}
        </p>
      </CardHeader>
      <CardContent className="text-left">
        {generalDocuments.length > 0 ? (
          <div className="space-y-2">
            {generalDocuments.map((doc) => (
              <DocumentItem
                key={doc.id}
                document={doc}
                tripId={tripId}
                isPlanner={isPlanner}
              />
            ))}
          </div>
        ) : (
          <div className="text-left py-4">
            <p className="text-muted-foreground">
              {isPlanner
                ? "Ajoutez les premiers documents utiles au voyage."
                : "Aucun document ne vous a encore été partagé."}
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}