// Small labels. Color only means something: green is online, blue is age verified or adult, red is banned.
import type { Link } from "@/lib/api";
import { cn } from "@/lib/utils";

const tones = {
  neutral: "border-border bg-muted/60 text-muted-foreground",
  strong: "border-foreground/15 bg-foreground/5 text-foreground",
  online: "border-emerald-600/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
  adult: "border-sky-600/20 bg-sky-500/10 text-sky-700 dark:text-sky-400",
  danger: "border-red-600/20 bg-red-500/10 text-red-700 dark:text-red-400",
};

export function Tag({
  tone = "neutral",
  dot = false,
  className,
  children,
}: {
  tone?: keyof typeof tones;
  dot?: boolean;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <span
      className={cn(
        "inline-flex h-6 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium whitespace-nowrap",
        tones[tone],
        className,
      )}
    >
      {dot && <span className="size-1.5 rounded-full bg-current" aria-hidden />}
      <span>{children}</span>
    </span>
  );
}

/** A round initial standing in for an avatar picture. */
export function Initial({ name }: { name: string }) {
  return (
    <span
      className="grid size-10 shrink-0 place-items-center rounded-full border bg-muted text-sm font-semibold text-muted-foreground uppercase"
      aria-hidden
    >
      {name.slice(0, 1)}
    </span>
  );
}

/** The community products an account wears. */
export function Outfit({ items }: { items: { id: string; name: string }[] }) {
  if (items.length === 0) return null;
  return (
    <div className="space-y-1.5">
      <div className="text-xs text-muted-foreground">Wearing</div>
      <ul className="flex flex-wrap gap-1.5">
        {items.map((item) => (
          <li key={item.id} className="rounded-md border bg-background px-2 py-0.5 text-xs">
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

/** A page's title and the line under it. */
export function PageHeader({ title, children }: { title: React.ReactNode; children?: React.ReactNode }) {
  return (
    <div className="mb-8 space-y-2">
      <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h1>
      {children && <div className="text-muted-foreground">{children}</div>}
    </div>
  );
}

/** An IMVU account's age status: blue when it can see adult community products. */
export function AgeTag({ link }: { link: Pick<Link, "ageVerified" | "accessPass"> }) {
  if (link.ageVerified) return <Tag tone="adult">Age verified</Tag>;
  if (link.accessPass) return <Tag tone="adult">Access Pass</Tag>;
  return <Tag>Not age verified</Tag>;
}