import { AlertTriangle, MapPin } from "lucide-react";
import type { ApiPostalAddress } from "@/lib/api/types";

/**
 * A formatted postal address: company, GSTIN, street, city/state/pincode,
 * phone. Used for billing, delivery, pickup and consignee blocks on every order
 * page — the API normalises the stored shapes, so nothing here ever prints raw
 * JSON (B28).
 */
export default function AddressBlock({
  title,
  address,
  emptyText = "Address not provided",
  showContact = true,
}: {
  title: string;
  address: ApiPostalAddress | null | undefined;
  emptyText?: string;
  /** Off for parties who should not see the counterparty's phone yet. */
  showContact?: boolean;
}) {
  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <div className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
        <MapPin className="h-3.5 w-3.5" /> {title}
      </div>
      {address ? (
        <address className="space-y-0.5 text-sm not-italic text-gray-700">
          {address.company_name && <div className="font-semibold text-gray-900">{address.company_name}</div>}
          {address.gstin && (
            <div className="text-xs text-gray-500">
              GSTIN: <span className="font-mono text-gray-700">{address.gstin}</span>
            </div>
          )}
          {address.address_line_one && <div>{address.address_line_one}</div>}
          {address.address_line_two && <div>{address.address_line_two}</div>}
          <div>
            {[address.city, address.state].filter(Boolean).join(", ")}
            {address.pincode ? ` – ${address.pincode}` : ""}
          </div>
          {showContact && address.phone && <div className="text-gray-500">Phone: {address.phone}</div>}
        </address>
      ) : (
        <p className="flex items-start gap-1.5 text-sm text-amber-700">
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" /> {emptyText}
        </p>
      )}
    </div>
  );
}