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

/**
 * The Balinyaar monochrome mark — a lowercase "b" (stem + bowl) reduced to a
 * single `currentColor` fill so it works like any other AppIcon: it recolors
 * via the `color` prop and therefore for free across the light/dark scheme.
 * The bowl's counter is a true transparent hole (evenodd fill-rule on two
 * concentric circles), not a background-color cutout — it reads correctly on
 * any surface. For the full-color brand lockup (auth splash, TopBar) see
 * LogoLockup.tsx instead.
 * @component LogoMark
 */
const LogoMark: FunctionComponent<IconProps> = ({ color = 'currentColor', ...props }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" {...props}>
    <path
      fill={color}
      fillRule="evenodd"
      clipRule="evenodd"
      d="M19.5,15.3 A7.2,7.2 0 1,0 19.5,29.7 A7.2,7.2 0 1,0 19.5,15.3 Z
         M19.5,18.9 A3.6,3.6 0 1,0 19.5,26.1 A3.6,3.6 0 1,0 19.5,18.9 Z"
    />
    <rect x="10.9" y="8" width="4.6" height="21" rx="2.3" fill={color} />
    <circle cx="27" cy="10" r="2.4" fill={color} />
  </svg>
);

export default LogoMark;
