import { cn } from '@/lib/utils';

import { SankofaMark } from './logos/SankofaMark';

type BrandLockupProps = {
  size?: 'sm' | 'md' | 'lg';
  showWordmark?: boolean;
  subtitle?: string;
  className?: string;
};

const sizes = {
  sm: { mark: 28, title: 'text-base', sub: 'text-[10px]' },
  md: { mark: 36, title: 'text-lg', sub: 'text-xs' },
  lg: { mark: 48, title: 'text-xl', sub: 'text-sm' },
};

/** Logo mark + institutional wordmark lockup */
export function BrandLockup({
  size = 'md',
  showWordmark = true,
  subtitle,
  className,
}: BrandLockupProps) {
  const s = sizes[size];

  return (
    <div className={cn('flex items-center gap-2.5', className)}>
      <SankofaMark size={s.mark} />
      {showWordmark && (
        <div className="flex flex-col leading-none">
          <span className={cn('font-semibold tracking-tight text-sovereign-ivory', s.title)}>
            Sankofa
          </span>
          {subtitle ? (
            <span className={cn('mt-0.5 font-medium uppercase tracking-[0.12em] text-sovereign-gold/80', s.sub)}>
              {subtitle}
            </span>
          ) : (
            <span className={cn('mt-0.5 font-medium uppercase tracking-[0.12em] text-sovereign-bronze/90', s.sub)}>
              Nexus
            </span>
          )}
        </div>
      )}
    </div>
  );
}
