commerce/site/components/common/About/TestimonialCard.tsx

import { ReactNode } from 'react'
import {
  Box,
  Heading,
  Text,
  Stack,
  Container,
  useColorModeValue,
} from '@chakra-ui/react'
import { useRouter } from 'next/router'

const Testimonial = ({ children }: { children: ReactNode }) => {
  return <Box>{children}</Box>
}

const TestimonialContent = ({ children }: { children: ReactNode }) => {
  return (
    <Box
      bg={useColorModeValue('white', 'gray.800')}
      boxShadow={'lg'}
      p={8}
      rounded={'xl'}
      alignItems={'center'}
      justifyContent={'center'}
      display={'flex'}
      w={'md'}
      height={'130px'}
    >
      {children}
    </Box>
  )
}

const TestimonialHeading = ({ children }: { children: ReactNode }) => {
  return (
    <Heading as={'h3'} fontSize={'xl'}>
      {children}
    </Heading>
  )
}

export default function MessageMap() {
  const { locale = 'it' } = useRouter()

  return (
    <Box bg={useColorModeValue('gray.100', 'gray.700')}>
      <Container maxW={'7xl'} py={16} as={Stack} spacing={12}>
        <Stack spacing={0} align={'center'}>
          <Heading>
            {locale == 'it' ? 'I Nostri Motti' : 'Our Catchphrases'}
          </Heading>
          <Text>
            {locale == 'it'
              ? 'Quello per cui lavoriamo ogni giorno...'
              : 'What we work for every day...'}
          </Text>
        </Stack>
        <Stack
          direction={{ base: 'column', md: 'row' }}
          spacing={{ base: 10, md: 4, lg: 10 }}
          justifyContent={'center'}
        >
          <Testimonial>
            <TestimonialContent>
              <TestimonialHeading>
                {locale == 'it'
                  ? 'Safara. Il sentiero che ci ha portato qui!'
                  : 'Safara. the path that led us here!'}
              </TestimonialHeading>
            </TestimonialContent>
          </Testimonial>
          <Testimonial>
            <TestimonialContent>
              <TestimonialHeading>
                {locale == 'it'
                  ? 'Safara espone e vende i tuoi pezzi di storia... e nel frattempo fa cultura, intrattenimento'
                  : 'Safara exposes and sells your pieces of history... and meanwhile does culture, entertainment'}
              </TestimonialHeading>
            </TestimonialContent>
          </Testimonial>
        </Stack>
      </Container>
    </Box>
  )
}