interface Props {
  /** Pixel size of the (square) mark. Defaults to the CSS .logo-mark size. */
  size?: number;
  className?: string;
}

/**
 * The Bill Tracker brand mark — a calm green bar chart with a checkmark.
 * Single source for the logo across the native shell (kept in sync with the web
 * app's client/public/brand/mark.svg). Shared so no screen hand-inlines the SVG.
 */
export default function LogoMark({ size, className = 'logo-mark' }: Props) {
  return (
    <span className={className} style={size ? { width: size, height: size } : undefined} aria-hidden="true">
      <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Bill Tracker">
        <defs>
          <linearGradient id="bt-bars" x1="48" x2="206" y1="210" y2="50" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#1e9f93" />
            <stop offset="0.58" stopColor="#40c878" />
            <stop offset="1" stopColor="#96e6a1" />
          </linearGradient>
          <linearGradient id="bt-ink" x1="34" x2="222" y1="34" y2="222" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#172025" />
            <stop offset="1" stopColor="#0f1417" />
          </linearGradient>
        </defs>
        <rect width="256" height="256" rx="58" fill="url(#bt-ink)" />
        <rect x="61" y="123" width="28" height="59" rx="8" fill="url(#bt-bars)" opacity="0.86" />
        <rect x="101" y="95" width="28" height="87" rx="8" fill="url(#bt-bars)" opacity="0.94" />
        <rect x="141" y="69" width="28" height="113" rx="8" fill="url(#bt-bars)" />
        <path d="M62 80.5 97.5 116 190 45" fill="none" stroke="#96e6a1" strokeLinecap="round" strokeLinejoin="round" strokeWidth="18" />
        <path d="M62 80.5 97.5 116 190 45" fill="none" stroke="#40c878" strokeLinecap="round" strokeLinejoin="round" strokeWidth="10" />
      </svg>
    </span>
  );
}
