import { useTrips } from "@/contexts/TripContext";
import { DocumentItemSmall } from "./DocumentItemSmall";
import type { Document } from "@/types";

interface DocumentsForStepProps {
  tripId: string;
  stepId: string;
  isPlanner: boolean;
}

export function DocumentsForStep({ tripId, stepId, isPlanner }: DocumentsForStepProps) {
  const { trips } = useTrips();
  const trip = trips.find((candidate) => candidate.id === tripId);
  const documents: Document[] = (trip?.documents || []).filter((document) => document.stepId === stepId);

  return (
    <div className="mt-4 border-t pt-4">
      <h3 className="mb-2 text-sm font-medium">Documents associés</h3>
      {documents.length ? <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
        {documents.map((doc) => (
          <DocumentItemSmall
            key={doc.id}
            document={doc}
            tripId={tripId}
            isPlanner={isPlanner}
          />
        ))}
      </div> : <p className="text-sm text-muted-foreground">Aucun document associé à cette étape.</p>}
    </div>
  );
}