office_translator/frontend/src/app/dashboard/glossaries/DeleteGlossaryDialog.tsx

'use client';

import { AlertTriangle } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useI18n } from '@/lib/i18n';

interface DeleteGlossaryDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  isDeleting: boolean;
  glossaryName?: string;
}

export function DeleteGlossaryDialog({
  open,
  onOpenChange,
  onConfirm,
  isDeleting,
  glossaryName,
}: DeleteGlossaryDialogProps) {
  const { t } = useI18n();
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{t('glossaries.delete.title')}</DialogTitle>
          <DialogDescription>
            {t('glossaries.delete.description')}
            {glossaryName && (
              <span className="block mt-1 font-medium text-foreground">
                "{glossaryName}"
              </span>
            )}
          </DialogDescription>
        </DialogHeader>
        
        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
          <div className="flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
            <div className="space-y-1">
              <p className="text-sm font-medium text-destructive">{t('glossaries.delete.warning')}</p>
              <p className="text-sm text-muted-foreground">
                {t('glossaries.delete.warningDesc')}
              </p>
            </div>
          </div>
        </div>
        
        <DialogFooter>
          <Button 
            variant="outline" 
            onClick={() => onOpenChange(false)}
            disabled={isDeleting}
          >
            {t('glossaries.delete.cancel')}
          </Button>
          <Button
            variant="destructive"
            onClick={onConfirm}
            disabled={isDeleting}
          >
            {isDeleting ? t('glossaries.delete.deleting') : t('glossaries.delete.deleteBtn')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}