import { useState, useEffect } from 'react'
import { Checkbox, Stack, Text, Group } from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'

export default function ConnectWithEmployers() {
  const t = useI18n()
  const [joinTalentPool, setJoinTalentPool] = useState(false)

  useEffect(() => {
    fetch('/json/user.json')
      .then((response) => response.json())
      .then((data) => {
        setJoinTalentPool(data.joinTalentPool ?? false)
      })
      .catch(() => {
        console.error('Failed to load user data, using default values.')
      })
  }, [])

  const handleCheckboxChange = (checked: boolean) => {
    setJoinTalentPool(checked)
    localStorage.setItem('joinTalentPool', JSON.stringify(checked))
  }

  return (
    <Stack gap="md">
      <Text mb="md" lineBreaks>{t('jobs.connectwithemployers.description')}</Text>

      <Group gap="xs" align="center" mt="md">
        <Checkbox
          id="joinTalentPool"
          checked={joinTalentPool}
          onChange={(e) => handleCheckboxChange(e.target.checked)}
          label={t('jobs.connectwithemployers.jointalentpool')}
          size="md"
        />
      </Group>
    </Stack>
  )
}