import { bookInfo } from '@/lib/books';

interface BookChipProps {
  book: string; // DK / FD / MGM / CZR / ESPN / BR / PB ... (case-insensitive)
  size?: 'sm' | 'md';
  showName?: boolean;
  nameColor?: string;
}

/**
 * BookChip (Session 42) — a sportsbook tile with the book's brand color, ported
 * from the design's BookChip.dc.html. JetBrains Mono mono-code in a tinted tile;
 * optional full name. Data chrome — never glitches.
 */
export default function BookChip({ book, size = 'sm', showName = false, nameColor = '#E6E8EE' }: BookChipProps) {
  const b = bookInfo(book);
  const sm = size === 'sm';
  const tile = sm ? 26 : 34;
  const monoSize = sm ? (b.mono.length > 2 ? 8 : 10) : (b.mono.length > 2 ? 10 : 13);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: sm ? 8 : 10, verticalAlign: 'middle' }}>
      <span
        className="mono"
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          flex: 'none',
          fontWeight: 800,
          lineHeight: 1,
          width: tile,
          height: tile,
          borderRadius: sm ? 6 : 8,
          fontSize: monoSize,
          color: b.fg,
          background: b.bg,
          border: `1px solid ${b.bd}`,
          letterSpacing: '-0.02em',
        }}
      >
        {b.mono}
      </span>
      {showName && (
        <span style={{ fontFamily: 'var(--sans)', fontSize: sm ? 12 : 14, fontWeight: 600, color: nameColor, whiteSpace: 'nowrap' }}>
          {b.name}
        </span>
      )}
    </span>
  );
}
