'use client';

import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Section } from '@/ui/Section';

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

/**
 * HomeFeatureSection - A semantic section highlighting a feature.
 */
export function HomeFeatureSection({
  heading,
  description,
  mockup,
  layout,
  accentColor = 'primary',
}: HomeFeatureSectionProps) {
  const glowColor = ({
    primary: 'primary',
    aqua: 'aqua',
    amber: 'amber',
  }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';

  return (
    <Section variant="dark" padding="lg">
      <Glow 
        color={glowColor} 
        size="lg" 
        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
        opacity={0.02} 
      />
      
      <Container>
        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
          {/* Text Content */}
          <Stack gap={8}>
            <Stack gap={4}>
              <Heading level={2} weight="bold">
                {heading}
              </Heading>
            </Stack>
            <Stack>
              {description}
            </Stack>
          </Stack>

          {/* Mockup Panel */}
          <Panel variant="dark">
            <Stack align="center" justify="center">
              {mockup}
            </Stack>
          </Panel>
        </Grid>
      </Container>
    </Section>
  );
}