import type {IconSvgProps} from "@/types";

import React from "react";
import {cn} from "@heroui/theme";

import {dataAttr} from "@/utils";
export interface LogoProps extends IconSvgProps {
  auto?: boolean;
  small?: boolean;
  outlined?: boolean;
  fill?: string;
  className?: string;
}

export const SmallLogoOutlined: React.FC<LogoProps> = ({
  auto,
  size,
  width,
  height,
  className,
  ...props
}) => (
  <svg
    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
    data-auto={dataAttr(auto)}
    fill="none"
    height={height || size || 25}
    viewBox="0 0 126 126"
    width={width || size || 25}
    {...props}
  >
    <path
      d="M33.3529 5H92.6471C108.306 5 121 17.694 121 33.3529V92.6471C121 108.306 108.306 121 92.6471 121H33.3529C17.694 121 5 108.306 5 92.6471V33.3529C5 17.694 17.694 5 33.3529 5Z"
      stroke="currentColor"
      strokeWidth="10"
    />
    <path d="M94.9539 36V89.6887H86.3363V36H94.9539Z" fill="currentColor" />
    <path
      d="M69.0885 36H77.7339V71.3118C77.7339 75.0694 76.795 78.3987 74.9172 81.2998C73.0394 84.1835 70.3993 86.4555 66.9969 88.1158C63.5945 89.7586 59.6064 90.58 55.0327 90.58C50.4776 90.58 46.4988 89.7586 43.0964 88.1158C39.694 86.4555 37.0539 84.1835 35.1761 81.2998C33.2983 78.3987 32.3594 75.0694 32.3594 71.3118V36H40.9769V70.6565C40.9769 73.0857 41.544 75.2441 42.6781 77.1316C43.8308 79.0191 45.4577 80.5046 47.5586 81.5882C49.6595 82.6543 52.1509 83.1873 55.0327 83.1873C57.9331 83.1873 60.4338 82.6543 62.5347 81.5882C64.6542 80.5046 66.2718 79.0191 67.3873 77.1316C68.5214 75.2441 69.0885 73.0857 69.0885 70.6565V36Z"
      fill="currentColor"
    />
  </svg>
);

export const SmallLogo: React.FC<LogoProps> = ({
  auto,
  size,
  width,
  height,
  className,
  ...props
}) => (
  <svg
    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
    data-auto={dataAttr(auto)}
    fill="none"
    height={height || size || 25}
    viewBox="0 0 126 126"
    width={width || size || 25}
    {...props}
  >
    <path
      d="M92.6471 0H33.3529C14.9326 0 0 14.9326 0 33.3529V92.6471C0 111.067 14.9326 126 33.3529 126H92.6471C111.067 126 126 111.067 126 92.6471V33.3529C126 14.9326 111.067 0 92.6471 0Z"
      fill="currentColor"
    />
    <path className="fill-background" d="M86.3181 89.4661V36H92.9271V89.4661H86.3181Z" />
    <path
      className="fill-background"
      d="M54.0894 90.58C49.9557 90.58 46.3046 89.726 43.1363 88.0181C39.9679 86.3101 37.4803 83.9215 35.6733 80.8521C33.8911 77.758 33 74.1317 33 69.9733V36.0371L39.6833 36V69.4163C39.6833 71.9411 40.1041 74.1441 40.9457 76.0253C41.812 77.8818 42.9506 79.4289 44.3616 80.6665C45.7725 81.9041 47.3195 82.8324 49.0027 83.4512C50.7107 84.0453 52.4062 84.3423 54.0894 84.3423C55.7974 84.3423 57.5053 84.0329 59.2133 83.4141C60.9212 82.7952 62.4682 81.8794 63.8544 80.6665C65.2653 79.4289 66.3916 77.8694 67.2332 75.9882C68.0748 74.107 68.4956 71.9164 68.4956 69.4163V36H75.1788V69.9733C75.1788 74.107 74.2754 77.7209 72.4684 80.815C70.6862 83.9091 68.2109 86.3101 65.0425 88.0181C61.8742 89.726 58.2231 90.58 54.0894 90.58Z"
    />
  </svg>
);

export const Logo: React.FC<LogoProps> = ({className, ...props}) => (
  <svg
    className={cn(" text-[#18181B] dark:text-[#FFFFFF]", className)}
    fill="none"
    viewBox="0 0 275 84"
    {...props}
  >
    <path
      d="M0 20.9484V46.0463C0 47.2326 0.609876 48.335 1.61325 48.9623L18.7276 59.6627C21.0083 61.0887 23.9623 59.4432 23.9623 56.7468V35.65C23.9623 34.4362 24.6006 33.3125 25.6413 32.6939L36.081 26.489V80.5589C36.081 83.2462 39.0172 84.8932 41.2985 83.4855L58.9629 72.5851C59.976 71.9599 60.5932 70.852 60.5932 69.6585V17.7361C60.5932 15.0618 57.6826 13.4129 55.4006 14.7942L36.081 26.489V3.44098C36.081 0.773993 33.1845 -0.876045 30.9022 0.490798L1.66918 17.9982C0.633988 18.6182 0 19.7387 0 20.9484Z"
      fill="currentColor"
    />
    <path
      d="M125.354 46.1061C125.354 38.9888 122.442 35.7039 116.616 35.7039C109.945 35.7039 105.247 40.175 105.247 50.2123V73.2067H93.2203V9.33333H105.247V32.6927C108.16 27.9479 112.952 25.5754 119.529 25.5754C130.71 25.5754 137.287 32.419 137.287 43.9162V73.2067H125.354V46.1061Z"
      fill="currentColor"
    />
    <path
      d="M167.054 74.6667C152.114 74.6667 142.625 64.9944 142.625 50.121C142.625 35.4302 152.021 25.5754 167.054 25.5754C183.309 25.5754 192.141 37.0726 189.698 53.2235H154.651C155.309 60.8883 159.819 65.2682 167.054 65.2682C172.973 65.2682 176.544 62.257 177.483 59.2458H189.416C187.537 68.1881 179.269 74.6667 167.054 74.6667ZM154.933 45.2849H178.047C177.953 38.9888 173.819 34.7002 166.772 34.7002C160.477 34.7002 156.061 38.3501 154.933 45.2849Z"
      fill="currentColor"
    />
    <path
      d="M196.257 38.7151C196.257 31.1415 200.485 27.0354 208.566 27.0354H223.975V36.8901H208.284V73.2067H196.257V38.7151Z"
      fill="currentColor"
    />
    <path
      d="M250.289 74.6667C235.067 74.6667 225.389 64.9032 225.389 50.121C225.389 35.3389 235.067 25.5754 250.289 25.5754C265.322 25.5754 275 35.3389 275 50.121C275 64.9032 265.322 74.6667 250.289 74.6667ZM250.289 64.7207C257.805 64.7207 262.785 58.9721 262.785 50.121C262.785 41.27 257.805 35.4302 250.289 35.4302C242.678 35.4302 237.698 41.27 237.698 50.121C237.698 58.9721 242.678 64.7207 250.289 64.7207Z"
      fill="currentColor"
    />
  </svg>
);
