'use client'

import { useTranslations } from 'next-intl'

export type OrderStatus = 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled' | 'returned' | 'refunded'

const STATUS_COLORS: Record<OrderStatus, string> = {
  pending: 'bg-yellow-100 text-yellow-700',
  confirmed: 'bg-blue-100 text-blue-700',
  shipped: 'bg-orange-100 text-orange-700',
  delivered: 'bg-green-100 text-green-700',
  cancelled: 'bg-red-100 text-red-700',
  returned: 'bg-purple-100 text-purple-700',
  refunded: 'bg-gray-200 text-gray-700',
}

// Single source of truth for order-status label + color across every
// /account order surface (list, detail, dashboard's recent-orders preview)
// — real `orders.status` values (`pending`/`confirmed`/`shipped`/
// `delivered`/`cancelled`/`returned`/`refunded`), not the old mock pages'
// invented `out_for_delivery`/`processing` states that don't exist in the
// schema.
export default function OrderStatusBadge({ status, className = '' }: { status: string; className?: string }) {
  const t = useTranslations('Account.orderStatus')
  const colorClass = STATUS_COLORS[status as OrderStatus] ?? 'bg-gray-100 text-gray-700'
  const labels: Record<OrderStatus, string> = {
    pending: t('pending'),
    confirmed: t('confirmed'),
    shipped: t('shipped'),
    delivered: t('delivered'),
    cancelled: t('cancelled'),
    returned: t('returned'),
    refunded: t('refunded'),
  }
  const label = labels[status as OrderStatus] ?? status

  return (
    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${colorClass} ${className}`}>
      {label}
    </span>
  )
}