'use client';

import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Modal } from '@/ui/Modal';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { AlertCircle, Box } from 'lucide-react';

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  variant?: 'danger' | 'primary';
  isLoading?: boolean;
}

export function ConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant = 'primary',
  isLoading = false,
}: ConfirmDialogProps) {
  return (
    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} title={title}>
      <Box p={6}>
        <Stack direction="row" gap={4} align="start">
          {variant === 'danger' && (
            <Box p={2} rounded="full" bg="bg-racing-red/10">
              <AlertCircle className="w-6 h-6 text-racing-red" />
            </Box>
          )}
          <Box flexGrow={1}>
            <Heading level={3} fontSize="lg" weight="semibold" mb={2}>
              {title}
            </Heading>
            <Text color="text-gray-400" size="sm" block mb={6}>
              {description}
            </Text>
          </Box>
        </Stack>

        <Box display="flex" justifyContent="end" gap={3}>
          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
            {cancelLabel}
          </Button>
          <Button
            variant={variant === 'danger' ? 'primary' : 'primary'}
            onClick={onConfirm}
            disabled={isLoading}
            className={variant === 'danger' ? 'bg-racing-red hover:bg-racing-red/90 border-racing-red' : ''}
          >
            {isLoading ? 'Processing...' : confirmLabel}
          </Button>
        </Box>
      </Box>
    </Modal>
  );
}