import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';

const ConfirmationModal = ({
  onCancel,
  onConfirm,
}: {
  onCancel: () => void;
  onConfirm: () => void;
}) => {
  return (
    <div className='absolute inset-0 z-20 flex h-fit w-fit flex-col items-center justify-center gap-2 place-self-center rounded-xl bg-background-tertiary p-8 text-foreground-primary'>
      <h4>Discard Changes?</h4>
      <p>Any unsaved changes will be lost.</p>
      <div className='flex items-center justify-between gap-2 px-4'>
        <Button
          variant={ButtonVariant.Secondary}
          size={ButtonSize.Small}
          onClick={onCancel}
        >
          Cancel
        </Button>
        <Button
          variant={ButtonVariant.Primary}
          size={ButtonSize.Small}
          onClick={onConfirm}
        >
          Discard
        </Button>
      </div>
    </div>
  );
};

export default ConfirmationModal;