import React from 'react';
import { Section } from './Section';
import { Container } from './Container';
import { Box } from './Box';
import { Glow } from './Glow';
import { Heading } from './Heading';

interface FeatureSectionProps {
  heading: string;
  description: React.ReactNode;
  mockup: React.ReactNode;
  layout?: 'text-left' | 'text-right';
  intent?: 'primary' | 'aqua' | 'amber';
}

/**
 * FeatureSection - A semantic UI component for highlighting a feature.
 * Encapsulates layout and styling.
 */
export function FeatureSection({
  heading,
  description,
  mockup,
  layout = 'text-left',
  intent = 'primary',
}: FeatureSectionProps) {
  return (
    <Section variant="dark" padding="lg">
      <Glow 
        color={intent} 
        size="lg" 
        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
        opacity={0.02} 
      />
      
      <Container>
        <Box 
          display="grid" 
          gridCols={{ base: 1, lg: 2 }} 
          gap={12} 
          alignItems="center"
        >
          {/* Text Content */}
          <Box 
            display="flex" 
            flexDirection="col" 
            gap={8} 
            order={layout === 'text-right' ? { base: 1, lg: 2 } : 1}
          >
            <Heading level={2} weight="bold">
              {heading}
            </Heading>
            <Box display="flex" flexDirection="col" gap={6}>
              {description}
            </Box>
          </Box>

          {/* Mockup Area */}
          <Box 
            order={layout === 'text-right' ? { base: 2, lg: 1 } : 2}
            bg="rgba(255, 255, 255, 0.02)"
            rounded="xl"
            padding={8}
            border
            borderColor="var(--ui-color-border-muted)"
          >
            {mockup}
          </Box>
        </Box>
      </Container>
    </Section>
  );
}