import { Box, Group, Text } from '@pikku/mantine/core'
import { mKey } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import { asI18n } from '@pikku/react'
import {
  BOOKING_STATUS,
  INVOICE_STATUS,
  type BookingStatus,
  type InvoiceStatus,
} from '../lib/status'

type Variant =
  | { kind: 'booking'; status: BookingStatus }
  | { kind: 'invoice'; status: InvoiceStatus }

export function StatusPill(props: Variant & { size?: 'sm' | 'xs' }) {
  useLocale()
  const size = props.size ?? 'xs'
  const palette =
    props.kind === 'booking'
      ? BOOKING_STATUS[props.status]
      : INVOICE_STATUS[props.status]
  const labelKey =
    props.kind === 'booking'
      ? `common.pages.bookingStatus.label.${props.status}`
      : `common.pages.adminBooking.invoices.status.${props.status}`

  return (
    <Group
      gap={6}
      wrap="nowrap"
      style={{
        background: palette.bg,
        color: palette.fg,
        padding: size === 'xs' ? '2px 8px' : '4px 10px',
        borderRadius: 999,
        fontSize: size === 'xs' ? 11 : 12,
        fontWeight: 600,
        letterSpacing: '0.02em',
        whiteSpace: 'nowrap',
        display: 'inline-flex',
        lineHeight: 1.2,
      }}
    >
      <Box
        component="span"
        style={{
          width: 6,
          height: 6,
          borderRadius: 999,
          background: palette.dot,
          flexShrink: 0,
        }}
      />
      <Text component="span" inherit>{asI18n(`${mKey(labelKey as any)}`)}</Text>
    </Group>
  )
}