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

import { useConsignment } from "../../hooks/useConsignments";

const ConsignmentDetailPage = () => {
  const { id } = useParams<{ id: string }>();
  const { data, isLoading } = useConsignment(id ?? "");

  if (isLoading) return <div className="text-sm text-gray-500">Loading…</div>;
  if (!data)
    return <div className="text-sm text-red-600">Consignment not found.</div>;

  return (
    <div className="flex flex-col gap-3">
      <h1 className="text-2xl font-semibold text-gray-900">
        Consignment {data.trackingNumber}
      </h1>
      <dl className="grid grid-cols-2 gap-2 text-sm">
        <dt className="text-gray-500">Status</dt>
        <dd className="text-gray-900">{data.status}</dd>
        <dt className="text-gray-500">Cargo</dt>
        <dd className="text-gray-900">{data.cargoType}</dd>
        <dt className="text-gray-500">Origin</dt>
        <dd className="text-gray-900">{data.originStation}</dd>
        <dt className="text-gray-500">Destination</dt>
        <dd className="text-gray-900">{data.destinationStation}</dd>
        <dt className="text-gray-500">Weight</dt>
        <dd className="text-gray-900">{data.weightKg.toFixed(2)} kg</dd>
      </dl>
    </div>
  );
};

export default ConsignmentDetailPage;
