import { cn } from "@/lib/utils";

/**
 * Small building blocks used to keep the order-details cards visually
 * consistent without repeating markup.
 */

export function DetailCard({
  title,
  icon,
  action,
  children,
  className,
}: {
  title: string;
  icon?: React.ReactNode;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section className={cn("rounded-lg border bg-card", className)}>
      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-5 py-3.5">
        <h2 className="flex items-center gap-2 text-sm font-semibold">
          {icon}
          {title}
        </h2>
        {action}
      </div>
      <div className="p-5">{children}</div>
    </section>
  );
}

export function InfoRow({
  label,
  value,
  mono = false,
}: {
  label: string;
  value: React.ReactNode;
  mono?: boolean;
}) {
  return (
    <div className="flex items-start justify-between gap-4 py-1.5">
      <dt className="shrink-0 text-sm text-muted-foreground">{label}</dt>
      <dd
        className={cn(
          "text-right text-sm font-medium",
          mono && "font-mono",
        )}
      >
        {value}
      </dd>
    </div>
  );
}

export function AddressBlock({
  title,
  address,
}: {
  title: string;
  address: {
    street: string;
    city: string;
    district: string;
    postalCode: string;
    country: string;
  };
}) {
  return (
    <div className="space-y-1">
      <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
        {title}
      </p>
      <p className="text-sm leading-relaxed text-foreground/90">
        {address.street}
        <br />
        {address.city}, {address.district} {address.postalCode}
        <br />
        {address.country}
      </p>
    </div>
  );
}