import type { Member } from "../types";

/** Boardly mark: three columns of uneven height settling into a rounded tile. */
export function BoardlyMark({ size = 26 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true" focusable="false">
      <rect width="28" height="28" rx="8" fill="var(--brand-ink)" />
      <rect x="6.5" y="6.5" width="4" height="15" rx="2" fill="#fff" />
      <rect x="12" y="6.5" width="4" height="9.5" rx="2" fill="var(--brand-accent)" />
      <rect x="17.5" y="6.5" width="4" height="12" rx="2" fill="#fff" opacity=".55" />
    </svg>
  );
}

export function Wordmark() {
  return (
    <span className="wordmark">
      <BoardlyMark />
      <span className="wordmark-text">
        Board<span className="wordmark-accent">ly</span>
      </span>
    </span>
  );
}

export function initials(name: string): string {
  const parts = name.split(/\s+/).filter(Boolean);
  return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
}

export function Avatar({ member, size = "sm" }: { member: Member | null; size?: "sm" | "md" }) {
  if (!member) {
    return (
      <span className={`avatar avatar-${size} avatar-empty`} aria-hidden="true">
        <svg viewBox="0 0 16 16" width="60%" height="60%" fill="none" stroke="currentColor" strokeWidth="1.5">
          <circle cx="8" cy="5.5" r="2.5" />
          <path d="M3.5 13.5a4.5 4.5 0 0 1 9 0" strokeLinecap="round" />
        </svg>
      </span>
    );
  }
  return (
    <span className={`avatar avatar-${size}`} data-member={member.id} aria-hidden="true">
      {initials(member.name)}
    </span>
  );
}

export function LabelChip({ id, name }: { id: string; name: string }) {
  return (
    <span className="label-chip" data-label={id}>
      <span className="label-dot" aria-hidden="true" />
      {name}
    </span>
  );
}