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 { useAuth } from 'hooks/useAuth';
import { useTranslation } from '@/components/locales';
import type { ErrorDialogsProps } from './index';

export const UnauthorizedDialog = ({ setApiError }: ErrorDialogsProps) => {
  const { signout } = useAuth();
  const { t } = useTranslation();
  const onOpenChange = (value: boolean) => {
    if (!value) {
      setApiError(null);
      signout();
      window.location.reload();
    }
  };
  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.unauthorized.title')}
          </DialogTitle>
          <DialogDescription className="flex flex-col gap-4 py-5">
            {t('error.unauthorized.description')}
          </DialogDescription>
        </DialogHeader>
        <p>{t('error.unauthorized.hint')}</p>
        <DialogFooter>
          <Button type="submit" onClick={() => onOpenChange(false)}>
            {t('button.ok')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};