import { useRecoilValue } from "recoil";

import { themeStore } from "../../stores";

const BrandLogo = () => {
  const theme = useRecoilValue(themeStore);

  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="53" height="27" fill="none">
      <path
        fill="#F16583"
        d="M52.5 13.854c0 6.627-5.373 12-12 12s-12-5.373-12-12c0-6.628 5.373-12 12-12s12 5.372 12 12Z"
      />
      <path
        fill="#F16583"
        stroke={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        d="M26.5 26.354c6.904 0 12.5-5.597 12.5-12.5 0-6.904-5.596-12.5-12.5-12.5S14 6.95 14 13.854c0 6.903 5.596 12.5 12.5 12.5Z"
      />
      <path
        fill={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        stroke={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        d="M12.745 26.354c6.757 0 12.214-5.608 12.214-12.5 0-6.893-5.457-12.5-12.214-12.5C5.988 1.354.53 6.96.53 13.854c0 6.892 5.458 12.5 12.215 12.5Z"
      />
      <path
        fill="#F16583"
        fillRule="evenodd"
        d="M12.745 21.597c4.174 0 7.559-3.467 7.559-7.744 0-4.276-3.385-7.743-7.56-7.743-4.174 0-7.558 3.467-7.558 7.744 0 4.276 3.384 7.743 7.559 7.743Zm0 4.256c6.47 0 11.714-5.372 11.714-12 0-6.627-5.245-12-11.714-12-6.47 0-11.715 5.373-11.715 12 0 6.628 5.245 12 11.715 12Z"
        clipRule="evenodd"
      />
    </svg>
  );
};

export default BrandLogo;