interface OrderCardProductProps {
  product: {
    name: string;
    image?: string;
    price?: number;
  };
  status: string;
  quantity: number;
  address?: string;
  email?: string;
  phone?: string;
}

export default function OrderCardProduct({ product, status, quantity, address, email, phone }: OrderCardProductProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm overflow-hidden">
      <div className="p-4 border-b flex justify-between items-center">
        <span className={`px-3 py-1 rounded-full text-sm ${
          status === 'delivered' ? 'bg-green-100 text-green-700' :
          status === 'cancelled' ? 'bg-red-100 text-red-700' :
          'bg-yellow-100 text-yellow-700'
        }`}>
          {status}
        </span>
        <span className="text-sm text-gray-500">x{quantity}</span>
      </div>
      
      <div className="p-4 flex gap-4">
        <img
          src={product.image || '/placeholder.jpg'}
          alt={product.name}
          className="w-20 h-20 object-cover rounded-lg"
        />
        <div className="flex-1">
          <h4 className="font-medium">{product.name}</h4>
          {product.price && (
            <p className="text-sm text-gray-500">฿{product.price.toLocaleString()}</p>
          )}
        </div>
      </div>
      
      {(address || email || phone) && (
        <div className="p-4 bg-gray-50 border-t">
          <p className="text-sm font-medium mb-2">ที่อยู่จัดส่ง</p>
          {address && <p className="text-sm text-gray-600">{address}</p>}
          {phone && <p className="text-sm text-gray-600">{phone}</p>}
          {email && <p className="text-sm text-gray-600">{email}</p>}
        </div>
      )}
    </div>
  );
}