import { useNavigate } from "react-router-dom";

export default function OrderCard({ order, statusLabels }) {
  const navigate = useNavigate();
  return (
    <div className="bg-white/5 rounded-lg p-4 border border-white/10">
      {/* шапка */}
      <div className="flex justify-between mb-2">
        <span className="font-medium">Заказ #{order.id}</span>
        <span className="text-white/60 text-sm uppercase">
          {statusLabels[order.status] || order.status}
        </span>
      </div>

      {/* товары */}
      <div className="flex flex-col gap-2 mb-3">
        {order.items?.map((oi) => (
          <div
            key={oi.id}
            className="flex items-center gap-3 text-sm text-white/70"
          >
            <img
              src={`/static/items/${oi.item?.avatar_url}`}
              alt=""
              onClick={() => navigate(`/items/${oi.item.id}`)}
              className="w-20 h-20 md:w-30 md:h-30 object-cover rounded shrink-0 cursor-pointer"
            />
            <span className="grow">{oi.item?.name}</span>
            <span className="whitespace-nowrap">
              {oi.quantity} {oi.item?.unit} × {oi.price} ₽
            </span>
          </div>
        ))}
      </div>

      {/* подвал */}
      <div className="flex justify-between pt-2 border-t border-white/10 text-sm">
        <span className="text-white/50">{order.delivery_address}</span>
        <span className="font-medium">Итого: {order.total_price} ₽</span>
      </div>
    </div>
  );
}
