import {
  Stack,
  Text,
  Title,
  List,
  Anchor,
  Table,
  Divider,
} from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'
import { asI18n } from '@pikku/react'
import { paidCourseProviders as providers } from '@/lib/content/paid-course-providers'
import { freeCourseLinks as freeLinks } from '@/lib/content/free-course-links'

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

  return (
    <Stack gap="md" mt="md">
      <Text lineBreaks>{t('jobs.germanlanguagetips.tip')}</Text>

      <Title order={3}>{t('jobs.germanlanguagetips.freecourses.title')}</Title>
      <List>
        {freeLinks.map((link, idx) => (
          <List.Item key={idx}>
            <Anchor href={link.url} target="_blank" rel="noopener noreferrer">
              {asI18n(link.name)}
            </Anchor>
          </List.Item>
        ))}
      </List>

      <Text lineBreaks>{t('jobs.germanlanguagetips.b1congrats')}</Text>
      <Text lineBreaks>{t('jobs.germanlanguagetips.b2requirement')}</Text>

      <Divider />

      <Title order={3}>{t('jobs.germanlanguagetips.paidcourses.title')}</Title>
      <Table withTableBorder withColumnBorders striped highlightOnHover>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Provider</Table.Th>
            <Table.Th>Levels</Table.Th>
            <Table.Th>Format</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {providers.map((course, idx) => (
            <Table.Tr key={idx}>
              <Table.Td>{course.provider}</Table.Td>
              <Table.Td>{course.levels}</Table.Td>
              <Table.Td>{course.format}</Table.Td>
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>
      <Text lineBreaks>{t('jobs.germanlanguagetips.paidcourses.fundingintro')}</Text>

      {/* TODO(i18n): the `jobs.germanlanguagetips.fundingoptions` source cell is
          corrupt JSON in the Google Sheet (truncated, unescaped quotes), so this
          section has rendered empty in all locales. Restore as a TS content
          module + messages once the source content is recovered. */}
    </Stack>
  )
}