BillTracker/client/components/brand/Brand.tsx

import { type ComponentProps } from 'react';
import { cn } from '@/lib/utils';
import { BRAND, BRAND_GLYPHS, type BrandGlyphName } from '@/lib/brand';
import { useTheme } from '@/contexts/ThemeContext';

type ImgProps = Omit<ComponentProps<'img'>, 'src' | 'alt'>;

export function BrandMark({ className, ...props }: ImgProps) {
  const { resolvedTheme } = useTheme();
  const src = resolvedTheme === 'light' ? BRAND.assets.logoLight : BRAND.assets.logo;

  return (
    <img
      src={src}
      alt={BRAND.name}
      className={cn('object-contain', className)}
      {...props}
    />
  );
}

export function BrandWordmark({ compact = false, className }: { compact?: boolean; className?: string }) {
  return (
    <span className={cn('font-semibold tracking-tight text-foreground', className)}>
      {compact ? BRAND.compactName : BRAND.name}
    </span>
  );
}

export function BrandGlyph({
  name,
  className,
}: {
  name: BrandGlyphName;
  className?: string;
}) {
  const glyph = BRAND_GLYPHS[name];

  return (
    <img
      src={glyph.asset}
      alt={glyph.label}
      width={40}
      height={40}
      draggable={false}
      // Fail soft: if the asset can't load, hide rather than show a broken image —
      // the adjacent title/label carries the meaning.
      onError={(e) => { e.currentTarget.style.display = 'none'; }}
      className={cn('inline-block h-10 w-10 shrink-0 select-none rounded-xl object-contain shadow-sm', className)}
    />
  );
}