"use client"

import { type HTMLChakraProps, chakra } from "@chakra-ui/react"
import { useId } from "react"

export const Logo = (props: HTMLChakraProps<"svg">) => {
  const id = useId()

  return (
    <chakra.svg height="9" viewBox="0 0 128 36" fill="none" {...props}>
      <path
        d="M34.5655 17.9244L28.0585 16.7206L27.3139 18.0099L25.4813 21.1828L20.7231 29.4212C20.5147 29.7819 19.9653 29.6335 19.9653 29.2166V22.2928V21.5412C19.9653 21.1509 19.6901 20.8153 19.3087 20.7404L11.8954 19.2841L5.25929 18.0708C5.26937 18.4155 5.35079 18.7586 5.50582 19.0761L10.9828 28.5803C11.7469 29.9063 13.1577 30.7221 14.6835 30.7201L25.1868 30.7061C26.7118 30.7041 28.1198 29.8854 28.8808 28.5585L34.2409 19.2113C34.4694 18.8138 34.5768 18.3679 34.5655 17.9244Z"
        fill={`url(#paint0_linear_${id})`}
      />
      <path
        d="M12.642 17.9885L14.4774 14.8034L19.2073 6.59529C19.4154 6.2342 19.9653 6.38242 19.9653 6.79963V14.471C19.9653 14.8617 20.2411 15.1976 20.6231 15.272L28.0585 16.7207L34.5655 17.9245C34.5572 17.5987 34.4841 17.2747 34.3464 16.9717C34.314 16.9004 34.2792 16.8299 34.2397 16.7613L28.8728 7.42387C28.1102 6.09724 26.7007 5.27994 25.1753 5.27994H14.6361C13.1082 5.27994 11.6968 6.09981 10.9352 7.42979L5.58357 16.7749C5.57125 16.7963 5.56056 16.8184 5.54894 16.8401C5.34348 17.2237 5.24692 17.6483 5.25929 18.0708L11.8954 19.2841L12.642 17.9885Z"
        fill={`url(#paint1_linear_${id})`}
      />
      <path
        d="M53.8552 13.1588L51.8692 15.2341C50.9295 14.2368 49.7754 13.7519 48.4336 13.7519C47.2526 13.7519 46.2594 14.1561 45.4544 14.9646C44.6759 15.7731 44.2731 16.7972 44.2731 18.01C44.2731 19.2227 44.676 20.247 45.4544 21.0555C46.2594 21.864 47.2526 22.2684 48.4336 22.2684C49.7754 22.2684 50.9295 21.7831 51.8692 20.786L53.8552 22.8611C52.406 24.4245 50.6077 25.206 48.4336 25.206C46.3668 25.206 44.6221 24.5323 43.1995 23.1577C41.7772 21.7831 41.0792 20.0582 41.0792 18.01C41.0792 15.9617 41.7772 14.2638 43.1995 12.8894C44.6221 11.5148 46.3668 10.8141 48.4336 10.8141C50.6077 10.8141 52.406 11.5958 53.8552 13.1588Z"
        fill="currentColor"
      />
      <path
        d="M55.4953 24.8287V6.0437H58.6893V13.1319C59.3065 11.8383 60.783 10.9758 62.6347 10.9758C65.7482 10.9758 67.5733 13.051 67.5733 16.42V24.8287H64.3794V16.8782C64.3794 15.0185 63.3862 13.8597 61.6684 13.8597C59.9241 13.8597 58.6893 15.1534 58.6893 17.0129V24.8287L55.4953 24.8287Z"
        fill="currentColor"
      />
      <path
        d="M80.5399 13.2129V11.2454H83.7608V24.8287H80.5399V22.8612C80.0836 24.1819 78.4462 25.1251 76.2186 25.1251C74.313 25.1251 72.7026 24.4514 71.3873 23.1038C70.099 21.7294 69.4548 20.0583 69.4548 18.037C69.4548 16.0158 70.099 14.3446 71.3873 12.9973C72.7026 11.6227 74.313 10.949 76.2186 10.949C78.4462 10.949 80.0836 11.8922 80.5399 13.2129ZM79.5737 21.0016C80.3787 20.2201 80.7816 19.2229 80.7816 18.037C80.7816 16.8512 80.3787 15.8539 79.5737 15.0724C78.7952 14.2909 77.802 13.8866 76.648 13.8866C75.494 13.8866 74.5546 14.2909 73.7762 15.0724C73.0247 15.8539 72.6487 16.8512 72.6487 18.037C72.6487 19.2229 73.0247 20.2201 73.7762 21.0016C74.5546 21.7831 75.494 22.1875 76.648 22.1875C77.802 22.1875 78.7952 21.7831 79.5737 21.0016Z"
        fill="currentColor"
      />
      <path
        d="M86.2329 24.8287V6.0437H89.4268V17.0129L94.4189 11.2453H98.1231L92.8354 17.3094L98.6868 24.8287H95.0365L90.7687 19.3577L89.4268 20.867V24.8287L86.2329 24.8287Z"
        fill="currentColor"
      />
      <path
        d="M99.7633 24.8287V11.2453H102.957V13.2666C103.601 11.8383 105.077 10.9758 106.983 10.9758C107.359 10.9758 107.681 11.0027 107.949 11.0568V14.1831C107.547 14.1021 107.09 14.0482 106.607 14.0482C104.38 14.0482 102.957 15.4497 102.957 17.6865V24.8286L99.7633 24.8287Z"
        fill="currentColor"
      />
      <path
        d="M119.521 13.2129V11.2454H122.742V24.8287H119.521V22.8612C119.065 24.1819 117.427 25.1251 115.2 25.1251C113.294 25.1251 111.684 24.4514 110.368 23.1038C109.08 21.7294 108.436 20.0583 108.436 18.037C108.436 16.0158 109.08 14.3446 110.368 12.9973C111.684 11.6227 113.294 10.949 115.2 10.949C117.427 10.949 119.065 11.8922 119.521 13.2129ZM118.555 21.0016C119.36 20.2201 119.763 19.2229 119.763 18.037C119.763 16.8512 119.36 15.8539 118.555 15.0724C117.776 14.2909 116.783 13.8866 115.629 13.8866C114.475 13.8866 113.536 14.2909 112.757 15.0724C112.006 15.8539 111.63 16.8512 111.63 18.037C111.63 19.2229 112.006 20.2201 112.757 21.0016C113.536 21.7831 114.475 22.1875 115.629 22.1875C116.783 22.1875 117.776 21.7831 118.555 21.0016Z"
        fill="currentColor"
      />
      <defs>
        <linearGradient
          id={`paint0_linear_${id}`}
          x1="33.9534"
          y1="23.645"
          x2="5.78627"
          y2="23.9059"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3585A3" />
          <stop offset="1" stopColor="#00DEAE" />
        </linearGradient>
        <linearGradient
          id={`paint1_linear_${id}`}
          x1="6.67767"
          y1="12.4545"
          x2="31.7007"
          y2="11.8021"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3585A3" />
          <stop offset="1" stopColor="#00DEAE" />
        </linearGradient>
      </defs>
    </chakra.svg>
  )
}

export const LogoIcon = (props: HTMLChakraProps<"svg">) => {
  const id = useId()

  return (
    <chakra.svg height="8" viewBox="0 0 30 26" fill="none" {...props}>
      <path
        d="M29.5655 12.9244L23.0585 11.7206L22.3139 13.0099L20.4813 16.1828L15.7231 24.4212C15.5147 24.7819 14.9653 24.6335 14.9653 24.2166V17.2928V16.5412C14.9653 16.1509 14.6901 15.8153 14.3087 15.7404L6.89538 14.2841L0.259293 13.0708C0.269371 13.4155 0.350786 13.7586 0.505816 14.0761L5.98276 23.5803C6.74691 24.9063 8.15775 25.7221 9.68349 25.7201L20.1868 25.7061C21.7118 25.7041 23.1198 24.8854 23.8808 23.5585L29.2409 14.2113C29.4694 13.8138 29.5768 13.3679 29.5655 12.9244Z"
        fill={`url(#paint0_linear_${id})`}
      />
      <path
        d="M7.64197 12.9885L9.47736 9.80344L14.2073 1.59529C14.4154 1.2342 14.9653 1.38242 14.9653 1.79963V9.47096C14.9653 9.86168 15.2411 10.1976 15.6231 10.272L23.0585 11.7207L29.5655 12.9245C29.5572 12.5987 29.4841 12.2747 29.3464 11.9717C29.314 11.9004 29.2792 11.8299 29.2397 11.7613L23.8728 2.42387C23.1102 1.09724 21.7007 0.279938 20.1753 0.279938H9.63609C8.10822 0.279938 6.69683 1.09981 5.93521 2.42979L0.58357 11.7749C0.571248 11.7963 0.560556 11.8184 0.548935 11.8401C0.343478 12.2237 0.24692 12.6483 0.259294 13.0708L6.89539 14.2841L7.64197 12.9885Z"
        fill={`url(#paint1_linear_${id})`}
      />
      <defs>
        <linearGradient
          id={`paint0_linear_${id}`}
          x1="28.9534"
          y1="18.645"
          x2="0.786272"
          y2="18.9059"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3585A3" />
          <stop offset="1" stopColor="#00DEAE" />
        </linearGradient>
        <linearGradient
          id={`paint1_linear_${id}`}
          x1="1.67767"
          y1="7.45445"
          x2="26.7007"
          y2="6.80208"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3585A3" />
          <stop offset="1" stopColor="#00DEAE" />
        </linearGradient>
      </defs>
    </chakra.svg>
  )
}

export const LogoBlitzIcon = (props: HTMLChakraProps<"svg">) => {
  return (
    <chakra.svg
      width="auto"
      height="8"
      viewBox="0 0 26 36"
      fill="none"
      {...props}
    >
      <path
        d="M0.439466 19.4621L19.1409 0.368881C19.4902 0.0121879 20.0525 0.446251 19.8166 0.890609L12.8561 14.0056C12.7007 14.298 12.9067 14.6549 13.2308 14.6549H25.2597C25.6473 14.6549 25.8343 15.1428 25.551 15.4147L4.47199 35.639C4.09405 36.0016 3.53148 35.4906 3.83492 35.0604L13.8133 20.9092C14.0178 20.6191 13.8163 20.2126 13.4676 20.2126H0.74036C0.359231 20.2126 0.169039 19.7382 0.439466 19.4621Z"
        fill="white"
      />
    </chakra.svg>
  )
}
