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

interface DiscoverySectionProps {
  title: string;
  subtitle: string;
  description: string;
  children: React.ReactNode;
}

/**
 * DiscoverySection - A semantic section for discovering content.
 */
export function DiscoverySection({
  title,
  subtitle,
  description,
  children,
}: DiscoverySectionProps) {
  return (
    <Section variant="dark" padding="lg">
      <Container>
        <Box maxWidth="2xl" marginBottom={16}>
          <Box 
            display="flex" 
            alignItems="center" 
            borderLeft 
            borderStyle="solid" 
            borderWidth="2px" 
            borderColor="var(--ui-color-intent-primary)" 
            paddingLeft={4} 
            marginBottom={4}
          >
            <Text size="xs" weight="bold" uppercase letterSpacing="widest" variant="primary">
              {subtitle}
            </Text>
          </Box>
          <Heading level={2} weight="bold" marginBottom={6}>
            {title}
          </Heading>
          <Text size="lg" variant="low" leading="relaxed">
            {description}
          </Text>
        </Box>

        <Grid cols={{ base: 1, lg: 3 }} gap={8}>
          {children}
        </Grid>
      </Container>
    </Section>
  );
}