"use client";

import { Box, Heading, Text, VStack } from "@chakra-ui/react";

interface Section {
  title: string;
  content: string | string[];
}

interface LegalPageProps {
  title: string;
  lastUpdated: string;
  sections: Section[];
}

export default function LegalPage({ title, lastUpdated, sections }: LegalPageProps) {
  return (
    <Box maxW="3xl" mx="auto" px={{ base: 4, md: 8 }} py={12}>
      <VStack align="start" gap={8}>
        <Box>
          <Heading as="h1" size="2xl" mb={2}>
            {title}
          </Heading>
          <Text fontSize="sm" color="fg.muted">
            {lastUpdated}
          </Text>
        </Box>

        {sections.map((section, i) => (
          <Box key={i} w="full">
            <Heading as="h2" size="md" mb={3}>
              {section.title}
            </Heading>
            {Array.isArray(section.content) ? (
              <VStack align="start" gap={2}>
                {section.content.map((para, j) => (
                  <Text key={j} color="fg.muted" lineHeight="1.8">
                    {para}
                  </Text>
                ))}
              </VStack>
            ) : (
              <Text color="fg.muted" lineHeight="1.8">
                {section.content}
              </Text>
            )}
          </Box>
        ))}
      </VStack>
    </Box>
  );
}