import { Stack, Text, List, Divider } from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'
import { mKey } from '@/i18n/messages'
import { compareRecognitionOptionKeys } from '@/lib/content/compare-recognition-options'

export default function CompareOptionsRecognition() {
  const t = useI18n()

  // Structure (which options, ordering) is data; text comes from messages.
  const options = compareRecognitionOptionKeys.map((key) => ({
    key,
    name: mKey(`jobs.compareoptionsrecognition.options.${key}.name`),
    description: mKey(`jobs.compareoptionsrecognition.options.${key}.description`),
    duration: mKey(`jobs.compareoptionsrecognition.options.${key}.duration`),
  }))

  return (
    <Stack gap="md">
      <Text mt="md" mb="md">
        {t('jobs.compareoptionsrecognition.context')}
      </Text>

      <Text fw="bold" mb="xs">
        {t('jobs.compareoptionsrecognition.choose')}
      </Text>
      <List withPadding spacing="xs" mb="md">
        {options.map((option: any) => (
          <List.Item key={option.key}>
            <Text fw="bold">{option.name}:</Text> {option.description}
          </List.Item>
        ))}
      </List>

      <Divider />

      <Text fw="bold" mt="md" mb="xs">
        {t('jobs.compareoptionsrecognition.duration')}
      </Text>
      <List withPadding spacing="xs" mb="md">
        {options.map((option: any) => (
          <List.Item key={option.key + '-duration'}>
            <Text fw="bold">{option.name}:</Text> {option.duration}
          </List.Item>
        ))}
      </List>

      <Text mt="md">
        {t('jobs.compareoptionsrecognition.requirementsaftercompletion')}
      </Text>

      <Text fw="bold" mt="md">
        {t('jobs.compareoptionsrecognition.professionaltitleintro')}
      </Text>
      <Text fw="bold" fz="md">
        {t('jobs.compareoptionsrecognition.professionaltitle')}
      </Text>

      <Text mt="sm" lineBreaks>{t('jobs.compareoptionsrecognition.outcome')}</Text>
    </Stack>
  )
}