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 type { ErrorDialogsProps } from './index';

export const ForbiddenDialog = ({ setApiError }: ErrorDialogsProps) => {
  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" />
            Unauthorized Access
          </DialogTitle>
          <DialogDescription className="flex flex-col gap-4 py-5">
            Your are not authorized to perform this action.
          </DialogDescription>
        </DialogHeader>
        <p>If you think this is an error, please contact your manager.</p>
        <DialogFooter>
          <Button type="submit" onClick={() => onOpenChange(false)}>
            Ok
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
