import { FC } from 'react';
import { Button } from './Button';
import { Dialog } from './Dialog';
import { Group } from './Group';
import { Stack } from './Stack';

type ConfirmProps = {
  open: boolean;
  title: string;
  message?: string;
  onConfirm: () => void;
  onCancel: () => void;
};

export const Confirm: FC<ConfirmProps> = ({
  open,
  title,
  message,
  onConfirm,
  onCancel,
}) => {
  return (
    <Dialog open={open} onRequestClose={onCancel}>
      <Stack className="w-100vw flex flex-col gap-2 border-gray-200 rounded-lg bg-white p-6 text-black sm:max-w-130 dark:bg-zinc-800 dark:text-white/90">
        <p>{title}</p>
        <p className="text-black/80">{message}</p>
        <Group className="justify-end gap-2">
          <Button className="bg-blue-5 text-white" onClick={onConfirm}>
            Confirm
          </Button>
          <Button className="bg-gray-200" onClick={onCancel}>
            Cancel
          </Button>
        </Group>
      </Stack>
    </Dialog>
  );
};
