import React from 'react'
import { Badge } from '@/components/ui/badge'
import { Ic } from '@/icons'
import type { FactorStatus } from '../types'

import { useTranslation } from '@/i18n'

interface Props {
  status: FactorStatus
  className?: string
}

export function BillingStatusBadge({ status, className }: Props) {
  const { t } = useTranslation()

  switch (status) {
    case 'awaiting_payment':
      return (
        <Badge
          variant="outline"
          className={`bg-amber-500/15 text-amber-700 dark:text-amber-300 border-amber-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="clock" className="size-3.5 text-amber-500 shrink-0" />
          <span>{t('billing.statusAwaiting')}</span>
        </Badge>
      )
    case 'pending':
      return (
        <Badge
          variant="outline"
          className={`bg-blue-500/15 text-blue-700 dark:text-blue-300 border-blue-500/30 gap-1.5 font-medium animate-pulse ${className || ''}`}
        >
          <Ic name="clock" className="size-3.5 text-blue-500 shrink-0" />
          <span>{t('billing.statusPending')}</span>
        </Badge>
      )
    case 'approved':
      return (
        <Badge
          variant="outline"
          className={`bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="checkCircle" className="size-3.5 text-emerald-500 shrink-0" />
          <span>{t('billing.statusApproved')}</span>
        </Badge>
      )
    case 'rejected':
      return (
        <Badge
          variant="outline"
          className={`bg-rose-500/15 text-rose-700 dark:text-rose-300 border-rose-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="xCircle" className="size-3.5 text-rose-500 shrink-0" />
          <span>{t('billing.statusRejected')}</span>
        </Badge>
      )
    case 'expired':
      return (
        <Badge
          variant="outline"
          className={`bg-slate-500/15 text-slate-600 dark:text-slate-400 border-slate-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="clock" className="size-3.5 text-slate-500 shrink-0" />
          <span>{t('billing.statusExpired')}</span>
        </Badge>
      )
    default:
      return (
        <Badge variant="outline" className={className}>
          {status}
        </Badge>
      )
  }
}