import type { CSSProperties } from 'react';
import { BrandLogo } from '@/components/ui/shared/BrandLogo';
import { BrandWordmark, BRAND_NAME } from '@/components/ui/shared/BrandWordmark';

type BrandLockupProps = {
  className?: string;
  style?: CSSProperties;
};

/** Logo + wordmark. Size via font-size / text-* on this wrapper (`em` on the SVGs). */
export function BrandLockup({ className, style }: BrandLockupProps) {
  return (
    <span
      dir="ltr"
      className={className}
      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.35em', ...style }}
      role="img"
      aria-label={BRAND_NAME}
    >
      <BrandLogo decorative />
      <BrandWordmark decorative />
    </span>
  );
}
