Profile Card

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

export interface ProfileCardProps {
  name: string;
  role: string;
  bio?: string;
  stats?: { label: string; value: string }[];
  status?: { label: string; online: boolean };
  actions?: { label: string; href: string; primary?: boolean }[];
  className?: string;
}

export function ProfileCard({ name, role, bio, stats = [], status, actions = [], className }: ProfileCardProps) {
  const initials = name
    .split(" ")
    .map((w) => w[0])
    .join("")
    .slice(0, 2);

  return (
    <article className={cn("da-stroke w-full max-w-sm bg-da-surface text-da-surface-fg shadow-da-md", className)} aria-label={`${name}, ${role}`}>
      <div className="da-stroke-b relative h-24 bg-da-secondary [background-image:repeating-linear-gradient(45deg,transparent_0_12px,rgb(0_0_0/0.12)_12px_15px)]">
        {status && (
          <p className="da-stroke absolute top-3 right-3 flex items-center gap-1.5 bg-da-surface px-2 py-1 font-da-mono text-[10px] font-bold text-da-surface-fg uppercase">
            <span aria-hidden className={cn("size-2", status.online ? "bg-da-success" : "bg-da-muted-fg")} />
            {status.label}
          </p>
        )}
      </div>
      <div className="px-5 pb-5">
        <span aria-hidden className="da-stroke relative -mt-10 grid size-20 place-items-center bg-da-primary font-da-display text-3xl text-da-primary-fg shadow-da-sm">
          {initials}
        </span>
        <h3 className="mt-3 font-da-display text-2xl tracking-da-display uppercase">{name}</h3>
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{role}</p>
        {bio && <p className="mt-3 text-sm">{bio}</p>}
      </div>
      {stats.length > 0 && (
        <dl className="da-stroke-t grid" style={{ gridTemplateColumns: `repeat(${stats.length}, minmax(0, 1fr))` }}>
          {stats.map((s, i) => (
            <div key={s.label} className={cn("flex flex-col-reverse p-3 text-center", i > 0 && "da-stroke-l")}>
              <dt className="font-da-mono text-[10px] font-bold tracking-da-label text-da-muted-fg uppercase">{s.label}</dt>
              <dd className="font-da-display text-xl">{s.value}</dd>
            </div>
          ))}
        </dl>
      )}
      {actions.length > 0 && (
        <div className="da-stroke-t flex">
          {actions.map((a, i) => (
            <a
              key={a.label}
              href={a.href}
              className={cn(
                "da-focus flex-1 py-3 text-center text-sm font-bold",
                i > 0 && "da-stroke-l",
                a.primary ? "bg-da-fg text-da-bg hover:bg-da-primary hover:text-da-primary-fg" : "hover:bg-da-muted",
              )}
            >
              {a.label}
            </a>
          ))}
        </div>
      )}
    </article>
  );
}

export default ProfileCard;