Profile card

import * as React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export type ProfileUser = {
  /** Full name. Its initials are the avatar fallback. */
  name: string;
  /** Role or title under the name. */
  role?: string;
  /** Avatar image url. */
  image?: string;
  /** A mono meta line, for example "Lisbon, joined Mar 2024". */
  meta?: string;
  /** One line about the person. */
  bio?: string;
};

type ProfileCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** The person to show. */
  user: ProfileUser;
  /** Buttons on the right in a row, under the text in a column. Buttons are made pills. */
  actions?: React.ReactNode;
  /** row puts the avatar beside the text; column stacks and centres everything. */
  layout?: "row" | "column";
};

function initials(name: string) {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("");
}

/**
 * A person: avatar, name, role, a mono meta line, a bio and actions.
 * Row for lists and headers, column for a team page.
 */
export function ProfileCard({ user, actions, layout = "row", className, ...props }: ProfileCardProps) {
  const column = layout === "column";
  return (
    <Card
      data-slot="profile-card"
      data-layout={layout}
      className={cn("surface-shine rounded-lg", className)}
      {...props}
    >
      <CardContent className={cn("flex gap-4", column ? "flex-col items-center px-6 py-2 text-center" : "items-start")}>
        <Avatar className="size-12">
          {user.image && <AvatarImage src={user.image} alt="" />}
          <AvatarFallback className="text-base text-foreground">{initials(user.name)}</AvatarFallback>
        </Avatar>
        <div className={cn("flex min-w-0 flex-col gap-1", column ? "items-center" : "flex-1")}>
          <div className="flex flex-col">
            <p className="m-0 truncate text-sm leading-5 font-medium text-foreground">{user.name}</p>
            {user.role && <p className="m-0 truncate text-sm text-muted-foreground">{user.role}</p>}
          </div>
          {user.meta && <p className="m-0 truncate font-mono text-xs text-muted-foreground">{user.meta}</p>}
          {user.bio && <p className="m-0 text-sm text-muted-foreground">{user.bio}</p>}
        </div>
        {actions && (
          <div
            className={cn(
              "flex shrink-0 flex-wrap items-center gap-2 [&_[data-slot=button]]:rounded-full",
              column ? "justify-center" : "justify-end",
            )}
          >
            {actions}
          </div>
        )}
      </CardContent>
    </Card>
  );
}