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

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

export const DangerZone = ({ 
  title, 
  description, 
  children 
}: DangerZoneProps) => {
  return (
    <Box marginTop={8}>
      <Heading level={3} marginBottom={4}>Danger Zone</Heading>
      <Surface 
        variant="muted" 
        rounded="lg" 
        padding={4} 
        style={{ border: '1px solid var(--ui-color-intent-critical)', backgroundColor: 'rgba(227, 92, 92, 0.05)' }}
      >
        <Box marginBottom={4}>
          <Text variant="high" weight="medium" block marginBottom={2}>{title}</Text>
          <Text size="sm" variant="low" block>
            {description}
          </Text>
        </Box>
        {children}
      </Surface>
    </Box>
  );
};