'use client'

import {
  Paper,
  Text,
  Flex,
  ThemeIcon,
  rem,
  useMantineTheme,
  Stack,
} from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'
import { asI18n } from '@pikku/react'
import {
  IconCircleCheck,
  IconExclamationCircle,
  IconClock,
  IconInfoCircle,
  IconCircle,
} from '@tabler/icons-react'

interface QualificationSectionStatusCardProps {
  label: string
  status: 'completed' | 'in-progress' | 'required' | 'optional'
  color: string
  icon: React.ReactNode
}

const getStatusIcon = (
  status: QualificationSectionStatusCardProps['status'],
  color: string
) => {
  const iconProps = { size: 20, color }
  switch (status) {
    case 'completed':
      return <IconCircleCheck {...iconProps} />
    case 'required':
      return <IconExclamationCircle {...iconProps} />
    case 'in-progress':
      return <IconClock {...iconProps} />
    case 'optional':
      return <IconInfoCircle {...iconProps} />
    default:
      return <IconCircle {...iconProps} />
  }
}

export const QualificationSectionStatusCard: React.FC<
  QualificationSectionStatusCardProps
> = ({ label, status, color, icon }) => {
  const theme = useMantineTheme()
  const t = useI18n()
  return (
    <Paper withBorder shadow="xs" p="md" radius="md" mb="xl" w={rem(220)}>
      <Stack>
        <Flex justify='space-between'>
          <Text size="lg" c="dimmed" mb="lg">
            {asI18n(label.split(' ')[0] ?? '')}
          </Text>
          <ThemeIcon
            size="lg"
            radius="xl"
            variant="outline"
            bg={color}
            color='white'
            p={4}
          >
            {icon}
          </ThemeIcon>
        </Flex>
        <Flex align="center">
          <ThemeIcon variant="transparent" size="md" radius="md">
            {getStatusIcon(status, `${theme.colors.gray[7]}`)}
          </ThemeIcon>
          <Text size="xl" fw={600}>
            {t(`enums.documentstatus.${status}` as any)}
          </Text>
        </Flex>
      </Stack>
    </Paper>
  )
}