'use client'

import { Link } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { ChevronRight, Package } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'
import OrderStatusBadge from './OrderStatusBadge'

export interface RecentOrder {
  id: string
  order_number: string
  created_at: string
  grand_total: number
  status: string
  items_count: number
}

interface RecentOrdersProps {
  orders: RecentOrder[]
}

export default function RecentOrders({ orders }: RecentOrdersProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Account.dashboard')
  const tOrders = useTranslations('Account.orders')

  if (orders.length === 0) return null

  return (
    <div className="bg-white rounded-xl border border-gray-100 overflow-hidden">
      <div className="flex justify-between items-center p-4 border-b border-gray-100">
        <h3 className="font-semibold text-dark">{t('recentOrders')}</h3>
        <Link href="/account/orders" className="text-primary text-sm flex items-center gap-1 hover:underline">
          {t('viewAll')} <ChevronRight size={14} />
        </Link>
      </div>

      <div className="divide-y divide-gray-100">
        {orders.map((order) => (
          <Link
            key={order.id}
            href={`/account/orders/${order.id}`}
            className="p-4 flex flex-wrap justify-between items-center gap-3 hover:bg-gray-50 transition"
          >
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                <Package size={18} className="text-gray-custom" />
              </div>
              <div>
                <p className="font-medium text-dark">{order.order_number}</p>
                <p className="text-xs text-gray-custom">
                  {new Date(order.created_at).toLocaleDateString()} • {tOrders('itemsCount', { count: order.items_count })}
                </p>
              </div>
            </div>
            <div className="text-right">
              <p className="font-semibold text-dark">{formatAmount(order.grand_total)}</p>
              <OrderStatusBadge status={order.status} />
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}