import Link from "next/link";
import { Avatar } from "./Avatar";
import { officeLabel, fullName } from "@/lib/format";
import type { Office } from "@/db/schema";

export interface PersonCardProps {
  person: { slug: string; firstName: string; lastName: string; title: string; department: string; office: Office; photoUrl?: string | null };
  skills?: string[];
  footer?: React.ReactNode;
}

export function PersonCard({ person, skills, footer }: PersonCardProps) {
  return (
    <Link href={`/people/${person.slug}`} className="card block p-5">
      <div className="flex items-center gap-4">
        <Avatar person={person} size={60} />
        <div className="min-w-0">
          <p className="font-medium leading-tight truncate">{fullName(person)}</p>
          <p className="text-sm text-ink/70 truncate">{person.title}</p>
          <p className="text-xs text-mist mt-0.5">{person.department} · {officeLabel[person.office]}</p>
        </div>
      </div>
      {skills && skills.length > 0 && (
        <div className="mt-4 flex flex-wrap gap-1.5">
          {skills.slice(0, 4).map((s) => <span key={s} className="chip">{s}</span>)}
        </div>
      )}
      {footer}
    </Link>
  );
}