import { X } from "lucide-react";
import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { TripStep } from "@/types";
import { EditStepForm } from "./EditStepForm";

interface EditStepDialogProps {
  step: TripStep;
  tripId: string;
  isOpen: boolean;
  onClose: () => void;
}

export function EditStepDialog({ step, tripId, isOpen, onClose }: EditStepDialogProps) {
  const handleClose = () => {
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
      <DialogContent className="max-h-[100dvh] w-full rounded-none sm:max-h-[90dvh] sm:max-w-[600px] sm:rounded-2xl">
        <DialogHeader className="relative pr-12">
          <DialogTitle>Modifier l'étape</DialogTitle>
          <DialogDescription>
            Modifiez les détails de cette étape de votre itinéraire.
          </DialogDescription>
          <DialogClose asChild><Button type="button" variant="ghost" size="icon" className="absolute -right-1 -top-2" aria-label="Fermer la modification de l’étape"><X className="h-5 w-5" /></Button></DialogClose>
        </DialogHeader>
        <EditStepForm
          step={step}
          tripId={tripId}
          onClose={handleClose}
        />
      </DialogContent>
    </Dialog>
  );
}