import React from "react";
import classNames from "classnames";
export type Props = {
  className?: string;
  fillColors?: "blue" | "gray";
};

const Logo = ({ className, fillColors = "blue" }: Props) => {
  return (
    <svg
      className={classNames(className, "group")}
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.4144 23.7511C8.27781 15.6345 1.97719 21.8024 3.62218 27.4753C7.75871 36.521 18.4462 40.5011 27.4937 36.364C30.6123 34.9384 33.2592 32.6525 35.1232 29.7747C30.3791 34.2166 21.7659 33.4741 14.4144 23.7497V23.7511Z"
        className={
          fillColors === "blue"
            ? "fill-blue-800"
            : "transition-colors   fill-gray-800 group-hover:fill-blue-800"
        }
      />
      <path
        d="M19.9003 18.1623C11.4604 5.36346 1.99988 12.1818 1.99988 20.0029C1.99656 22.5922 2.55489 25.1515 3.63638 27.5043C2.51332 22.2054 8.60318 18.1213 14.273 25.7253C22.5092 36.7684 30.5857 34.8254 35.1069 29.8009C36.5583 27.5725 37.4959 25.0493 37.8517 22.414V22.4486C35.9103 28.4694 27.3438 29.4487 19.9003 18.1623Z"
        className={
          fillColors === "blue"
            ? "fill-blue-700"
            : "transition-colors fill-gray-700 group-hover:fill-blue-700"
        }
      />
      <path
        d="M25.6847 12.4357C19.4173 2.09746 11.4696 3.03152 6.09469 8.56867C3.44128 11.788 1.99328 15.8313 1.99989 20.0029C2.56566 12.4371 11.7164 7.16935 20.0007 20.0029C27.3643 31.4243 36.5384 28.4489 37.8432 22.4812V22.4239C37.9578 21.6113 38.0065 20.7908 37.9889 19.9703V19.1522C34.8 21.434 30.6062 20.553 25.6832 12.435L25.6847 12.4357Z"
        className={
          fillColors === "blue"
            ? "fill-blue-600"
            : "transition-colors fill-gray-500 group-hover:fill-blue-600"
        }
      />
      <path
        d="M25.7278 14.2762C31.4676 23.5022 36.416 21.1419 38.0009 19.1685C37.9371 17.7893 37.714 16.4222 37.3361 15.0943C34.6607 15.1515 34.0369 14.704 31.404 10.6969C27.3806 4.53119 22.3119 0.369312 13.4568 3.23299C10.5865 4.35751 8.05111 6.19656 6.09116 8.57569C12.1761 2.97702 19.6422 4.49654 25.7278 14.2762Z"
        className={
          fillColors === "blue"
            ? "fill-blue-400"
            : "transition-colors fill-gray-200 group-hover:fill-blue-400"
        }
      />
      <path
        d="M31.0114 11.4889C33.6359 15.5037 35.2335 15.708 37.336 15.095C34.6097 5.51969 24.6358 -0.0323048 15.0593 2.69349C14.5162 2.84763 13.982 3.02747 13.4568 3.23299C21.367 0.737706 26.9774 5.32312 31.0114 11.4889Z"
        className={
          fillColors === "blue"
            ? "fill-blue-200"
            : "transition-colors fill-gray-75 group-hover:fill-blue-200"
        }
      />
    </svg>
  );
};

export default Logo;