import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import StatusBadge from "./StatusBadge";
import CarrierBadge from "./CarrierBadge";

function ParcelCard({ parcel }) {
  const navigate = useNavigate();

  return (
    <div
      onClick={() => navigate(`/parcel/${parcel.id}`)}
      className="bg-white rounded-xl shadow-sm cursor-pointer hover:shadow-md transition-shadow flex items-center gap-3 lg:gap-4 p-3.5 lg:p-4"
    >
      <CarrierBadge carrierId={parcel.carrierId} />

      <div className="flex-1 min-w-0 space-y-1.5 lg:space-y-2">
        <div className="flex items-center gap-1.5 text-xs lg:text-sm text-gray-400">
          <span>{parcel.carrierName}</span>
          <span>|</span>
          <span className="tracking-letter-spacing">
            {parcel.trackingNumber}
          </span>
        </div>

        <p className="font-semibold text-sm lg:text-base text-gray-900 truncate">
          {parcel.label || parcel.trackingNumber}
        </p>

        <div className="flex items-center justify-between">
          <span className="text-xs lg:text-sm text-gray-400">
            {dayjs(parcel.createdAt).format("YYYY.MM.DD")}
          </span>
          <StatusBadge status={parcel.status} />
        </div>
      </div>
    </div>
  );
}

export default ParcelCard;