import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Panel } from '@/ui/Panel';

interface AlternatingSectionProps {
  heading: string;
  description: string | React.ReactNode;
  mockup: React.ReactNode;
  layout: 'text-left' | 'text-right';
}

export function AlternatingSection({
  heading,
  description,
  mockup,
  layout,
}: AlternatingSectionProps) {
  const textContent = (
    <Stack gap={8}>
      <Stack gap={4}>
        <Heading level={2} weight="bold">
          {heading}
        </Heading>
      </Stack>
      <Stack>
        {typeof description === 'string' ? (
          <Text size="lg" variant="low">{description}</Text>
        ) : (
          description
        )}
      </Stack>
    </Stack>
  );

  const mockupContent = (
    <Panel variant="dark">
      <Stack align="center" justify="center">
        {mockup}
      </Stack>
    </Panel>
  );

  return (
    <Section variant="dark" padding="lg">
      <Container size="lg">
        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
          {layout === 'text-left' ? (
            <>
              {textContent}
              {mockupContent}
            </>
          ) : (
            <>
              {mockupContent}
              {textContent}
            </>
          )}
        </Grid>
      </Container>
    </Section>
  );
}