import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getUserFacingErrorMessage } from "@/utils/errorHandlers";

interface TripErrorProps {
  error: string | null;
  onRetry: () => void;
  isPlanner: boolean;
}

export function TripError({ error, onRetry, isPlanner }: TripErrorProps) {
  return (
    <div className="container px-4 py-8 mx-auto max-w-6xl">
      <Alert variant="destructive" className="mb-6">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Erreur de chargement</AlertTitle>
        <AlertDescription>
          {getUserFacingErrorMessage(error, "Impossible de charger ce voyage. Veuillez réessayer.")}
        </AlertDescription>
        <div className="mt-4">
          <Button onClick={onRetry} variant="outline" size="sm" className="gap-2">
            <RefreshCw className="h-4 w-4" />
            Réessayer
          </Button>
        </div>
      </Alert>
    </div>
  );
}