"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { deleteClass } from "./actions";

export function DeleteClassDialog({ classId, className: name }: { classId: string; className: string }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>Supprimer</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Supprimer la classe</DialogTitle>
          </DialogHeader>
          <p>Êtes-vous sûr de vouloir supprimer <strong>{name}</strong> ? Cette action est irréversible.</p>
          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => setOpen(false)}>Annuler</Button>
            <form action={deleteClass}>
              <input type="hidden" name="id" value={classId} />
              <Button type="submit" variant="destructive">Supprimer</Button>
            </form>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}