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

interface OrderHistoryCardProps {
  order: {
    order_number: string;
    status: string;
    total: number;
    created_at: string;
  };
  products?: { name: string; image?: string }[];
  onClick?: () => void;
}

export default function OrderHistoryCard({ order, products, onClick }: OrderHistoryCardProps) {
  return (
    <div 
      className="bg-white rounded-xl shadow-sm p-4 cursor-pointer hover:shadow-md transition-shadow"
      onClick={onClick}
    >
      <div className="flex gap-4">
        {products?.slice(0, 3).map((p, i) => (
          <img
            key={i}
            src={p.image || '/placeholder.jpg'}
            alt={p.name}
            className="w-16 h-16 object-cover rounded-lg"
          />
        ))}
        {(products?.length || 0) > 3 && (
          <div className="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
            <span className="text-sm text-gray-500">+{(products?.length || 0) - 3}</span>
          </div>
        )}
      </div>
      
      <div className="mt-4 flex justify-between items-start">
        <div>
          <p className="font-medium">{order.order_number}</p>
          <p className="text-xs text-gray-500">
            {new Date(order.created_at).toLocaleDateString('th-TH')}
          </p>
        </div>
        <span className={`px-2 py-1 rounded-full text-xs ${
          order.status === 'delivered' ? 'bg-green-100 text-green-700' :
          order.status === 'cancelled' ? 'bg-red-100 text-red-700' :
          'bg-yellow-100 text-yellow-700'
        }`}>
          {order.status}
        </span>
      </div>
      
      <div className="mt-3 pt-3 border-t flex justify-between items-center">
        <span className="text-sm text-gray-500">รวม</span>
        <span className="font-bold">{formatCurrency(order.total)}</span>
      </div>
    </div>
  );
}