'use client';

import { Modal, Stack, Text, Group, Button } from '@mantine/core';
import { IconTrash } from '@tabler/icons-react';

interface DeleteNodeModalProps {
  opened: boolean;
  onClose: () => void;
  onConfirm: () => void;
  nodeTitle: string | null;
  isDeleting: boolean;
}

export function DeleteNodeModal({
  opened,
  onClose,
  onConfirm,
  nodeTitle,
  isDeleting,
}: DeleteNodeModalProps) {
  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title="Delete Node"
      centered
      zIndex={1001}
    >
      <Stack gap="md">
        <Text>
          Are you sure you want to delete &quot;{nodeTitle}&quot;? This will:
        </Text>
        <Stack gap="xs" ml="md">
          <Text size="sm">• Remove the post from Bluesky</Text>
          <Text size="sm">• Delete the node from your galaxy</Text>
          <Text size="sm" fw={600} c="red">This action cannot be undone.</Text>
        </Stack>
        <Group justify="flex-end" gap="sm">
          <Button
            variant="subtle"
            onClick={onClose}
            disabled={isDeleting}
          >
            Cancel
          </Button>
          <Button
            color="red"
            onClick={onConfirm}
            loading={isDeleting}
            leftSection={<IconTrash size={16} />}
          >
            Delete Permanently
          </Button>
        </Group>
      </Stack>
    </Modal>
  );
}