import { Box, Container, Heading, Text, VStack } from '@chakra-ui/react';
import NewsletterSubscribe from './NewsletterSubscribe';

type NewsletterSectionProps = {
  title?: string;
  description?: string;
  bgColor?: string;
  py?: number | string;
};

export default function NewsletterSection({
  title = 'Přihlaste se k odběru novinek',
  description = 'Nenechte si ujít žádné novinky, zápasy a akce našeho klubu. Odebírejte náš newsletter a buďte v obraze.',
  bgColor = 'gray.50',
  py = 16,
}: NewsletterSectionProps) {
  return (
    <Box as="section" bg={bgColor} py={py}>
      <Container maxW="container.lg">
        <VStack spacing={6} align="center" textAlign="center" maxW="3xl" mx="auto">
          <Heading as="h2" size="xl">
            {title}
          </Heading>
          {description && (
            <Text fontSize="lg" color="gray.600" maxW="2xl">
              {description}
            </Text>
          )}
          <Box w="100%" maxW="md" mt={4}>
            <NewsletterSubscribe />
          </Box>
          <Text fontSize="sm" color="gray.500" mt={2}>
            Vaši e-mailovou adresu budeme používat pouze pro zasílání novinek. Můžete se kdykoli odhlásit.
          </Text>
        </VStack>
      </Container>
    </Box>
  );
}
