Build a company directory with logos

type Company = {
  id: string;
  name: string;
  domain: string | null;
  // Saved separately from automatically refreshed company data.
  domainOverride: string | null;
  hideLogo: boolean;
};

function logoUrl(
  domain: string,
  publicClientId: string,
  theme: "light" | "dark",
  type: "icon" | "wordmark",
) {
  const params = new URLSearchParams({ publicClientId, domain, theme, type });
  return `https://logos.context.dev/?${params}`;
}

"use client";

import { useState } from "react";

function CompanyLogo({
  company, src, wordmark,
}: { company: Company; src: string | null; wordmark: boolean }) {
  const [failed, setFailed] = useState(false);
  const initials = company.name.trim().slice(0, 2).toUpperCase() || "?";
  const width = wordmark ? 112 : 40;

  return (
    <span style={{ width, height: 40, display: "grid", placeItems: "center" }}>
      {src && !failed ? (
        <img
          src={src}
          alt={`${company.name} logo`}
          width={width}
          height={40}
          loading="lazy"
          decoding="async"
          style={{ objectFit: "contain", maxWidth: "100%" }}
          onError={() => setFailed(true)}
        />
      ) : (
        <span aria-hidden="true">{initials}</span>
      )}
    </span>
  );
}

export function CompanyDirectory({
  companies, publicClientId, onEdit,
}: {
  companies: Company[];
  publicClientId: string;
  onEdit: (company: Company) => void;
}) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [type, setType] = useState<"icon" | "wordmark">("icon");

  return (
    <section style={{
      background: theme === "dark" ? "#171717" : "#ffffff",
      color: theme === "dark" ? "#fafafa" : "#171717",
      padding: 24,
    }}>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Use {theme === "light" ? "dark" : "light"} background
      </button>
      <button onClick={() => setType(type === "icon" ? "wordmark" : "icon")}>
        Show {type === "icon" ? "wordmarks" : "icons"}
      </button>
      <ul style={{ listStyle: "none", padding: 0 }}>
        {companies.map((company) => {
          const domain = company.domainOverride ?? company.domain;
          const src = domain && !company.hideLogo
            ? logoUrl(domain, publicClientId, theme, type)
            : null;
          return (
            <li key={company.id} style={{
              display: "flex", alignItems: "center", gap: 16, padding: "12px 0",
              flexWrap: "wrap",
            }}>
              <CompanyLogo
                key={src ?? "fallback"}
                company={company}
                src={src}
                wordmark={type === "wordmark"}
              />
              <span>{company.name}</span>
              <button onClick={() => onEdit(company)}
                aria-label={`Edit brand for ${company.name}`}>
                Edit brand
              </button>
            </li>
          );
        })}
      </ul>
    </section>
  );
}