'use client';

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
} from '@mui/material';
import { Warning } from '@mui/icons-material';
import { useTranslation } from '@/hooks/useTranslation';

interface DeleteConfirmDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  childName: string;
  isLoading?: boolean;
}

export function DeleteConfirmDialog({
  open,
  onClose,
  onConfirm,
  childName,
  isLoading = false,
}: DeleteConfirmDialogProps) {
  const { t } = useTranslation('children');

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="xs"
      fullWidth
      aria-labelledby="delete-dialog-title"
      aria-describedby="delete-dialog-description"
      role="alertdialog"
    >
      <DialogTitle id="delete-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Warning color="warning" aria-hidden="true" />
        {t('dialog.confirmDelete')}
      </DialogTitle>
      <DialogContent>
        <Typography variant="body1" id="delete-dialog-description">
          {t('dialog.confirmDeleteMessage')} <strong>{childName}</strong>?
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
          {t('dialog.confirmDeleteWarning')}
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={isLoading}>
          {t('dialog.cancel')}
        </Button>
        <Button onClick={onConfirm} color="error" variant="contained" disabled={isLoading}>
          {isLoading ? t('dialog.deleting') : t('dialog.delete')}
        </Button>
      </DialogActions>
    </Dialog>
  );
}