"use client"
import { useState } from "react";




type Props ={
    onDelete: () => void;
};

const DeleteConfirmation = ({onDelete}: Props) => {
    const [deleteCard, setDeleteCard] = useState(false);
    if(deleteCard){
        return(
            <div className="">
                <h4 className="flex text-[red] text-xs justify-center mt-2">Are you sure you want to delete this?</h4>
                <div className="grid grid-col-2 ">
                    <button onClick={() => setDeleteCard(false)} className="w-full p-2 bg-gray-200 text-xs uppercase font-semibold mt-2 rounded-md">Cancel</button>
                    <button onClick={onDelete} className="uppercase text-xs text-white p-2 rounded-md bg-[tomato] font-semibold mt-2 w-full">Delete</button>
                </div>
            </div>
            
        );
    }


  return (
    <button onClick={() => setDeleteCard(true)} className="uppercase text-sm text-white p-2 rounded-md bg-[tomato] font-semibold mt-2 w-full">Delete</button>
  )
}

export default DeleteConfirmation