"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, Trash2, X } from "lucide-react"

interface DeleteConfirmationDialogProps {
  templateTitle: string
  onConfirm: () => Promise<void>
  onCancel: () => void
  loading?: boolean
}

export function DeleteConfirmationDialog({ 
  templateTitle, 
  onConfirm, 
  onCancel, 
  loading = false 
}: DeleteConfirmationDialogProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <Card className="bg-white/5 border-white/10 max-w-md w-full mx-4">
        <CardHeader>
          <CardTitle className="text-white flex items-center">
            <AlertTriangle className="mr-2 h-5 w-5 text-red-400" />
            Delete Template
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-white/80">
            Are you sure you want to delete the template <strong className="text-white">"{templateTitle}"</strong>?
          </p>
          <p className="text-white/60 text-sm">
            This action cannot be undone. The template will be permanently removed from the database.
          </p>
          
          <div className="flex justify-end space-x-3 pt-4">
            <Button
              variant="outline"
              onClick={onCancel}
              className="border-white/20 text-white hover:bg-white/10"
              disabled={loading}
            >
              <X className="mr-2 h-4 w-4" />
              Cancel
            </Button>
            <Button
              onClick={onConfirm}
              className="bg-red-500 hover:bg-red-400 text-white"
              disabled={loading}
            >
              <Trash2 className="mr-2 h-4 w-4" />
              {loading ? "Deleting..." : "Delete Template"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
