import React, { ReactNode } from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Heading } from './Heading';
import { Card } from './Card';

interface DangerZoneProps {
  title: string;
  description: string;
  children: ReactNode;
}

export function DangerZone({ title, description, children }: DangerZoneProps) {
  return (
    <Card>
      <Heading level={3} mb={4}>Danger Zone</Heading>
      <Box p={4} rounded="lg" bg="bg-red-900/10" border={true} borderColor="border-red-900/30">
        <Text color="text-white" weight="medium" block mb={2}>{title}</Text>
        <Text size="sm" color="text-gray-400" block mb={4}>
          {description}
        </Text>
        {children}
      </Box>
    </Card>
  );
}