Profile Card

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

export interface ProfileCardProps {
  name?: string;
  role?: string;
  emoji?: string;
  tone?: "peach" | "mint" | "lavender" | "butter";
  status?: string;
  stats?: { value: string; label: string }[];
  skills?: string[];
  className?: string;
}

const TONES = { peach: "bg-da-accent", mint: "bg-da-secondary", lavender: "bg-da-primary/20", butter: "bg-da-warning/40" } as const;

/** Rounded teammate card: pastel header band with a big emoji avatar, name, role, status pill, three stats in soft wells, skill pills and message button. */
export function ProfileCard({
  name = "Ana Souza",
  role = "Studio lead",
  emoji = "🦊",
  tone = "peach",
  status = "🌴 Back on Monday",
  stats = [
    { value: "32", label: "done" },
    { value: "5", label: "boards" },
    { value: "98%", label: "on time" },
  ],
  skills = ["Planning", "Design", "Workshops"],
  className,
}: ProfileCardProps) {
  return (
    <article className={cn("w-full max-w-xs overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md", className)}>
      <div aria-hidden className={cn("h-20", TONES[tone])} />
      <div className="px-6 pb-6 text-center">
        <span aria-hidden className="mx-auto -mt-10 grid size-20 place-items-center rounded-full bg-da-surface text-4xl shadow-da-md ring-4 ring-da-surface">
          {emoji}
        </span>
        <h3 className="mt-3 font-da-display text-xl font-extrabold">{name}</h3>
        <p className="text-sm text-da-muted-fg">{role}</p>
        <p className="mt-3 inline-block rounded-da-pill bg-da-surface-2 px-3 py-1 text-xs font-semibold">{status}</p>
        <dl className="mt-5 grid grid-cols-3 gap-2">
          {stats.map((s) => (
            <div key={s.label} className="flex flex-col rounded-da-md bg-da-surface-2 py-3">
              <dt className="order-2 text-[11px] text-da-muted-fg">{s.label}</dt>
              <dd className="font-da-display text-lg font-extrabold">{s.value}</dd>
            </div>
          ))}
        </dl>
        <ul className="mt-4 flex flex-wrap justify-center gap-1.5" aria-label="Skills">
          {skills.map((s) => (
            <li key={s} className="rounded-da-pill bg-da-primary/12 px-3 py-1 text-xs font-semibold">
              {s}
            </li>
          ))}
        </ul>
        <a
          href="#message"
          className="da-focus da-transition mt-5 flex h-11 items-center justify-center rounded-da-pill bg-da-fg font-semibold text-da-bg hover:-translate-y-0.5"
        >
          Say hi 👋
        </a>
      </div>
    </article>
  );
}

export default ProfileCard;