import { type ReactNode, useState } from "react";
import { Checkbox } from "../ui/checkbox";
import { Label } from "../ui/label";
import { ConfirmAlert } from "./confirm-alert";

export function ConfirmDeleteAlert({
  children,
  title = "Confirm Delete",
  data,
  onConfirm,
}: {
  children: ReactNode;
  title?: string;
  data: IProduct;
  onConfirm: (unlist: boolean) => void | Promise<void>;
}) {
  const [unlist, setUnlist] = useState(false);

  return (
    <ConfirmAlert
      title={title}
      description={
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">
            This action will permanently delete the item. You can also choose to
            unlist it before deleting.
          </p>

          {data.status && (
            <div className="flex items-start gap-3">
              <Checkbox
                id="unlist-option"
                checked={unlist}
                onCheckedChange={(checked) => setUnlist(!!checked)}
              />
              <div className="grid gap-1">
                <Label htmlFor="unlist-option" className="font-medium">
                  Also unlist this item before deletion
                </Label>
              </div>
            </div>
          )}
        </div>
      }
      onConfirm={() => onConfirm(unlist)}
    >
      {children}
    </ConfirmAlert>
  );
}