import React from "react";
import Svg, { Path, Polyline } from "react-native-svg";
import { useTheme } from "../theme";

type BrandMarkProps = {
  color?: string;
  size?: number;
};

const VIEWBOX_WIDTH = 297.65;
const VIEWBOX_HEIGHT = 263.4;

export default function BrandMark({
  color,
  size = 34,
}: BrandMarkProps) {
  const theme = useTheme();
  const stroke = color ?? (theme.dark ? theme.colors.brandText : theme.colors.brandAccent);

  return (
    <Svg
      width={size}
      height={(size * VIEWBOX_HEIGHT) / VIEWBOX_WIDTH}
      viewBox="0 0 297.65 263.4"
      fill="none"
    >
      <Path
        d="M122.02,12.5h-33.51c-6.08,0-11.69,3.24-14.73,8.51L14.78,123.19c-3.04,5.26-3.04,11.75,0,17.01l59,102.19c3.04,5.26,8.66,8.51,14.73,8.51h33.51"
        stroke={stroke}
        strokeWidth={25}
        strokeLinecap="round"
        strokeMiterlimit={10}
      />
      <Polyline
        points="164.84 250.9 164.84 12.5 215.82 152.6 216.33 12.5 285.15 131.7 216.33 250.9"
        stroke={stroke}
        strokeWidth={25}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
}
