import { bookInfo, bookSlug, hasBookSvg } from '@/lib/books';

/**
 * BookWordmark (DS0 · Wave 2B) — a sportsbook renders as its brand. When a
 * bundled local wordmark SVG exists (`web/public/books/{slug}.svg`, for the ~8
 * major books) it renders that; otherwise it falls back to the real book NAME
 * in the book's brand color, properly cased (DraftKings, FanDuel), NEVER a bare
 * lowercase "draftkings" string (DESIGN-SPEC Part 2).
 *
 * The bundled SVGs are self-authored styled text wordmarks — not copied
 * trademarked logo glyphs — so the founder can drop official press-kit art into
 * the same paths later with zero code change. The files are local + always
 * present, so no broken-image state is possible. `best` gives the signal ring.
 */
export default function BookWordmark({
  book,
  best = false,
  size = 12,
}: {
  book: string;
  best?: boolean;
  size?: number;
}) {
  const b = bookInfo(book);
  const slug = bookSlug(book);
  const svg = hasBookSvg(book) && slug ? `/books/${slug}.svg` : null;
  return (
    <span
      className="mono"
      title={best ? `Best price · ${b.name}` : b.name}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
        fontSize: size, fontWeight: 700, color: b.fg, letterSpacing: '0.01em',
        ...(best
          ? { padding: '1px 7px', borderRadius: 5, background: `color-mix(in srgb, ${b.fg} 12%, transparent)`, border: `1px solid color-mix(in srgb, ${b.fg} 45%, transparent)` }
          : {}),
      }}
    >
      {best && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--g-a)', boxShadow: '0 0 6px var(--g-a)' }} />}
      {svg ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={svg} alt={b.name} height={Math.round(size * 1.35)} style={{ display: 'block', width: 'auto', height: Math.round(size * 1.35) }} />
      ) : (
        b.name
      )}
    </span>
  );
}
