aqila_panel/src/features/billing/components/BillingServiceBadge.tsx

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

interface Props {
  service: FactorService
  className?: string
}

export function BillingServiceBadge({ service, className }: Props) {
  const { t } = useTranslation()

  switch (service) {
    case 'tour':
      return (
        <Badge
          variant="outline"
          className={`bg-purple-500/15 text-purple-700 dark:text-purple-300 border-purple-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="map" className="size-3.5 text-purple-500 shrink-0" />
          <span>{t('billing.serviceTour')}</span>
        </Badge>
      )
    case 'simcard':
      return (
        <Badge
          variant="outline"
          className={`bg-cyan-500/15 text-cyan-700 dark:text-cyan-300 border-cyan-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="simcard" className="size-3.5 text-cyan-500 shrink-0" />
          <span>{t('billing.serviceSimcard')}</span>
        </Badge>
      )
    case 'shop':
      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="store" className="size-3.5 text-amber-500 shrink-0" />
          <span>{t('billing.serviceShop')}</span>
        </Badge>
      )
    case 'tasrif':
      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="exchange" className="size-3.5 text-emerald-500 shrink-0" />
          <span>{t('billing.serviceExchange')}</span>
        </Badge>
      )
    case 'custom_trip':
      return (
        <Badge
          variant="outline"
          className={`bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 border-indigo-500/30 gap-1.5 font-medium ${className || ''}`}
        >
          <Ic name="calculator" className="size-3.5 text-indigo-500 shrink-0" />
          <span>{t('billing.serviceCustomTrip')}</span>
        </Badge>
      )
    default:
      return (
        <Badge variant="outline" className={className}>
          {service}
        </Badge>
      )
  }
}