import { formatCurrency } from '../../lib/utils';

interface Order {
  id: string;
  order_number: string;
  status: string;
  total: number;
  created_at: string;
  items?: { length: number }[];
}

interface OrderHistoryProps {
  orders: Order[];
  onViewDetails: (id: string) => void;
}

const statusColors: Record<string, string> = {
  pending: 'bg-yellow-100 text-yellow-700',
  confirmed: 'bg-blue-100 text-blue-700',
  processing: 'bg-purple-100 text-purple-700',
  shipped: 'bg-orange-100 text-orange-700',
  delivered: 'bg-green-100 text-green-700',
  cancelled: 'bg-red-100 text-red-700',
};

export default function OrderHistory({ orders, onViewDetails }: OrderHistoryProps) {
  if (!orders?.length) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500">ยังไม่มีคำสั่งซื้อ</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {orders.map(order => (
        <div key={order.id} className="bg-white rounded-xl shadow-sm p-6">
          <div className="flex justify-between items-start mb-4">
            <div>
              <p className="font-bold">{order.order_number}</p>
              <p className="text-sm text-gray-500">
                {new Date(order.created_at).toLocaleDateString('th-TH')}
              </p>
            </div>
            <span className={`px-3 py-1 rounded-full text-sm ${statusColors[order.status] || 'bg-gray-100'}`}>
              {order.status}
            </span>
          </div>
          
          <div className="flex justify-between items-center">
            <p className="text-sm text-gray-500">
              {order.items?.length || 0} รายการ
            </p>
            <p className="font-bold text-lg">{formatCurrency(order.total)}</p>
          </div>
          
          <button
            onClick={() => onViewDetails(order.id)}
            className="mt-4 w-full py-2 border rounded-lg text-blue-600 hover:bg-blue-50"
          >
            ดูรายละเอียด
          </button>
        </div>
      ))}
    </div>
  );
}