import React from 'react'
import { Box, Stack, Title, Text, Flex, Container } from '@pikku/mantine/core'
import { asI18n } from '@pikku/react'

interface CandidateSectionProps {
  title: string
  example: string
  description: string
  children: React.ReactNode
}

export const CandidateSection: React.FunctionComponent<CandidateSectionProps> = ({
  title,
  example,
  description,
  children
}) => {
  return (
      <Flex gap="md" direction={{ base: 'column', md: 'row' }}>
        <Stack flex={1}>
          <Title order={2}>{asI18n(title)}</Title>

          <Text size="xl" mb="md">
            {asI18n(example)}
          </Text>

          <Text>
            {asI18n(description)}
          </Text>
        </Stack>

        <Box flex={1}>
          {children}
        </Box>
      </Flex>
  )
}