"use client";
import axios from "axios"
import { useRouter } from "next/navigation"
import { Trash2, AlertTriangle } from "lucide-react";
import useSite from "@/hooks/useSites";

interface DeleteSiteProps {
    siteId: number;
}

export default function DeleteSite({ siteId }: DeleteSiteProps) {
    const router = useRouter()
    const { deleteSite } = useSite()

    const handleDeleteSite = () => {
        deleteSite(siteId)
        router.push("/dashboard/sites")
    }
    
    return (
        <div>
            <dialog id="delete_site" className="modal">
                <div className="modal-box w-11/12 max-w-md border-l-4 border-error">
                    <div className="flex items-center gap-3 mb-3">
                        <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
                            <Trash2 className="h-6 w-6" />
                        </div>
                        <h3 className="font-bold text-xl">Delete Site</h3>
                    </div>
                    
                    <div className="bg-base-200 p-4 rounded-lg mb-4">
                        <p className="text-sm">
                            <span className="font-medium">Are you sure you want to delete this site?</span>
                        </p>
                        <p className="text-sm mt-2">
                            This will also delete all networks associated with this site.
                        </p>
                        <div className="mt-2 flex items-center gap-2 text-error">
                            <AlertTriangle className="h-5 w-5" />
                            <span className="font-bold">This action cannot be undone.</span>
                        </div>
                    </div>
                    
                    <div className="modal-action">
                        <form method="dialog" className="flex gap-3 w-full justify-end">
                            <button className="btn btn-outline">Cancel</button>
                            <button 
                                className="btn btn-error text-error-content" 
                                onClick={handleDeleteSite}
                            >
                                Delete Site
                            </button>
                        </form>
                    </div>
                </div>
            </dialog>
        </div>
    );
}