import { Dialog, DialogContent, DialogDescription } from '@/components/ui/dialog';
import { DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Ban } from 'lucide-react';
import { useTranslation } from '@/components/locales';
import type { ErrorDialogsProps } from './index';

export const CustomErrorDialog = ({ apiError, setApiError }: ErrorDialogsProps) => {
  const { t } = useTranslation();
  const onOpenChange = (value: boolean) => {
    if (!value) {
      setApiError(null);
    }
  };
  return (
    <Dialog open={true} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-10">
            <Ban className="h-12 w-12 text-red-500" />
            {t('error.server.title')}
          </DialogTitle>
          <DialogDescription className="flex flex-col gap-4 py-5">{apiError?.uuid}</DialogDescription>
        </DialogHeader>
        {/* The server's own message, shown verbatim — it is a response, not UI copy (see D1). */}
        <p>{apiError?.message}</p>
        <DialogFooter>
          <Button type="submit" onClick={() => onOpenChange(false)}>
            {t('button.ok')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};