import { Mail, Phone, User } from "lucide-react";
import { DetailCard } from "./detail-card";
import type { Order } from "../../types";

interface CustomerCardProps {
  order: Order;
}

/**
 * Buyer identity and contact details.
 */
export function CustomerCard({ order }: CustomerCardProps) {
  return (
    <DetailCard
      title="Customer"
      icon={<User className="h-4 w-4 text-muted-foreground" />}
    >
      <div className="space-y-3">
        <div className="flex items-center gap-3">
          <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
            {order.customer.name
              .split(" ")
              .map((n) => n[0])
              .slice(0, 2)
              .join("")}
          </div>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold">{order.customer.name}</p>
            <p className="text-xs text-muted-foreground">Registered customer</p>
          </div>
        </div>

        <div className="space-y-2.5 border-t border-border/60 pt-3.5">
          <a
            href={`mailto:${order.email}`}
            className="group flex items-center gap-2.5 text-sm"
          >
            <Mail className="h-4 w-4 shrink-0 text-muted-foreground/70 group-hover:text-primary" />
            <span className="truncate text-foreground/90 group-hover:text-primary">
              {order.email}
            </span>
          </a>
          <a
            href={`tel:${order.phone}`}
            className="group flex items-center gap-2.5 text-sm"
          >
            <Phone className="h-4 w-4 shrink-0 text-muted-foreground/70 group-hover:text-primary" />
            <span className="font-mono text-foreground/90 group-hover:text-primary">
              {order.phone}
            </span>
          </a>
        </div>
      </div>
    </DetailCard>
  );
}