import { FunctionComponent } from 'react';
import { IconProps } from '../utils';

/**
 * The full-color Balinyaar mark: deep-teal rounded-square ground, cream
 * lowercase "b" glyph, single terracotta dot — the brand identity described
 * in the frontend-designer skill. Colors are `var(--bal-*)` tokens (never a
 * hex literal), so the mark tracks the color scheme like everything else.
 * Used directly by BrandMark next to the translated wordmark — the wordmark
 * stays real `<Typography>` text (not baked into the SVG) so it still
 * switches with the locale. For an inline, single-color icon (e.g. inside a
 * button) use AppIcon's `logo` name (LogoMark) instead.
 * @component LogoLockup
 */
const LogoLockup: FunctionComponent<IconProps> = ({ size = 56, ...props }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width={size} height={size} {...props}>
    <rect width="40" height="40" rx="10" fill="var(--bal-primary)" />
    <path
      fill="var(--bal-primary-contrast)"
      fillRule="evenodd"
      clipRule="evenodd"
      d="M21,17 A7.5,7.5 0 1,0 21,32 A7.5,7.5 0 1,0 21,17 Z
         M21,20.8 A3.7,3.7 0 1,0 21,28.2 A3.7,3.7 0 1,0 21,20.8 Z"
    />
    <rect x="12.9" y="9" width="4.8" height="22" rx="2.4" fill="var(--bal-primary-contrast)" />
    <circle cx="28.5" cy="10.5" r="2.6" fill="var(--bal-secondary)" />
  </svg>
);

export default LogoLockup;
