/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/alt-text */
import { SVGProps } from "react"

export const size = {
  width: 1200,
  height: 630,
}

function Logo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      width="194"
      height="55"
      viewBox="0 0 194 55"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M52.3884 27.3841L42.5262 25.5449L41.3976 27.5146L38.6202 32.3621L31.4085 44.9486C31.0927 45.4997 30.2599 45.273 30.2599 44.6359V34.058V32.9096C30.2599 32.3134 29.8429 31.8006 29.2648 31.6862L18.029 29.4613L7.97119 27.6077C7.98647 28.1343 8.10986 28.6585 8.34483 29.1435L16.6458 43.6638C17.804 45.6897 19.9423 46.936 22.2547 46.9329L38.1738 46.9116C40.4851 46.9085 42.6192 45.6578 43.7725 43.6305L51.8964 29.3501C52.2428 28.7428 52.4056 28.0616 52.3884 27.3841Z"
        fill="url(#paint0_linear_960_3286)"
      />
      <path
        d="M19.1607 27.4822L21.9424 22.6162L29.1112 10.076C29.4266 9.5243 30.2601 9.75076 30.2601 10.3882V22.1082C30.2601 22.7052 30.6781 23.2183 31.2571 23.3321L42.5263 25.5453L52.3885 27.3844C52.3759 26.8868 52.2651 26.3917 52.0564 25.9288C52.0073 25.8199 51.9547 25.7122 51.8947 25.6073L43.7605 11.3419C42.6048 9.31506 40.4684 8.06641 38.1565 8.06641H22.183C19.8673 8.06641 17.7282 9.31898 16.5739 11.3509L8.4628 25.6282C8.44413 25.6609 8.42792 25.6946 8.41031 25.7278C8.09892 26.3138 7.95257 26.9625 7.97132 27.6081L18.0292 29.4617L19.1607 27.4822Z"
        fill="url(#paint1_linear_960_3286)"
      />
      <path
        d="M81.6239 20.1036L78.6138 23.2742C77.1897 21.7506 75.4405 21.0097 73.4068 21.0097C71.6169 21.0097 70.1116 21.6272 68.8915 22.8625C67.7116 24.0977 67.101 25.6624 67.101 27.5151C67.101 29.3679 67.7116 30.9328 68.8915 32.1681C70.1116 33.4033 71.6169 34.0211 73.4068 34.0211C75.4405 34.0211 77.1897 33.2797 78.6138 31.7563L81.6239 34.9267C79.4274 37.3151 76.702 38.5091 73.4068 38.5091C70.2743 38.5091 67.63 37.4798 65.4738 35.3797C63.3182 33.2797 62.2603 30.6444 62.2603 27.5151C62.2603 24.3858 63.3182 21.7919 65.4738 19.6921C67.63 17.592 70.2743 16.5215 73.4068 16.5215C76.702 16.5215 79.4274 17.7157 81.6239 20.1036Z"
        fill="white"
      />
      <path
        d="M84.1099 37.9327V9.2334H88.9506V20.0626C89.8861 18.0862 92.1239 16.7686 94.9304 16.7686C99.6493 16.7686 102.416 19.939 102.416 25.086V37.9327H97.5748V25.7861C97.5748 22.9449 96.0695 21.1745 93.466 21.1745C90.8222 21.1745 88.9506 23.1509 88.9506 25.9919V37.9327L84.1099 37.9327Z"
        fill="white"
      />
      <path
        d="M122.068 20.1863V17.1803H126.95V37.9327H122.068V34.9267C121.376 36.9444 118.895 38.3855 115.518 38.3855C112.63 38.3855 110.189 37.3562 108.196 35.2974C106.243 33.1976 105.267 30.6445 105.267 27.5565C105.267 24.4685 106.243 21.9154 108.196 19.8569C110.189 17.7568 112.63 16.7275 115.518 16.7275C118.895 16.7275 121.376 18.1685 122.068 20.1863ZM120.604 32.0858C121.824 30.8918 122.434 29.3682 122.434 27.5565C122.434 25.7448 121.824 24.2212 120.604 23.0272C119.424 21.8333 117.918 21.2155 116.169 21.2155C114.42 21.2155 112.997 21.8333 111.817 23.0272C110.678 24.2212 110.108 25.7448 110.108 27.5565C110.108 29.3682 110.678 30.8918 111.817 32.0858C112.997 33.2797 114.42 33.8975 116.169 33.8975C117.918 33.8975 119.424 33.2797 120.604 32.0858Z"
        fill="white"
      />
      <path
        d="M130.697 37.9327V9.2334H135.538V25.9918L143.104 17.1804H148.718L140.704 26.4449L149.572 37.9327H144.04L137.571 29.5742L135.538 31.88V37.9326L130.697 37.9327Z"
        fill="white"
      />
      <path
        d="M151.203 37.9326V17.1803H156.044V20.2683C157.02 18.0862 159.257 16.7686 162.146 16.7686C162.715 16.7686 163.204 16.8096 163.61 16.8922V21.6685C163 21.5449 162.308 21.4625 161.576 21.4625C158.2 21.4625 156.044 23.6036 156.044 27.021V37.9326L151.203 37.9326Z"
        fill="white"
      />
      <path
        d="M181.148 20.1863V17.1803H186.03V37.9327H181.148V34.9267C180.456 36.9444 177.975 38.3855 174.599 38.3855C171.71 38.3855 169.27 37.3562 167.276 35.2974C165.323 33.1976 164.347 30.6445 164.347 27.5565C164.347 24.4685 165.323 21.9154 167.276 19.8569C169.27 17.7568 171.71 16.7275 174.599 16.7275C177.975 16.7275 180.456 18.1685 181.148 20.1863ZM179.684 32.0858C180.904 30.8918 181.514 29.3682 181.514 27.5565C181.514 25.7448 180.904 24.2212 179.684 23.0272C178.504 21.8333 176.998 21.2155 175.249 21.2155C173.5 21.2155 172.077 21.8333 170.897 23.0272C169.758 24.2212 169.188 25.7448 169.188 27.5565C169.188 29.3682 169.758 30.8918 170.897 32.0858C172.077 33.2797 173.5 33.8975 175.249 33.8975C176.998 33.8975 178.504 33.2797 179.684 32.0858Z"
        fill="white"
      />
      <defs>
        <linearGradient
          id="paint0_linear_960_3286"
          x1="51.4607"
          y1="36.1238"
          x2="8.76984"
          y2="36.5161"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#3585A3" />
          <stop offset="1" stop-color="#00DEAE" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_960_3286"
          x1="10.121"
          y1="19.0275"
          x2="48.047"
          y2="18.0466"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#3585A3" />
          <stop offset="1" stop-color="#00DEAE" />
        </linearGradient>
      </defs>
    </svg>
  )
}

function ThunderIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      width="20"
      height="28"
      viewBox="0 0 20 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M0.100071 15.1526L14.8401 0.103706C15.1154 -0.177432 15.5587 0.164687 15.3727 0.51492L9.88659 10.8519C9.76408 11.0823 9.92648 11.3636 10.1819 11.3636H19.6629C19.9683 11.3636 20.1157 11.7482 19.8924 11.9625L3.27842 27.9028C2.98053 28.1886 2.53713 27.7859 2.77629 27.4468L10.641 16.2931C10.8022 16.0644 10.6434 15.7441 10.3685 15.7441H0.33723C0.0368319 15.7441 -0.113073 15.3702 0.100071 15.1526Z"
        fill="currentColor"
      />
    </svg>
  )
}

export interface OpenGraphImageProps {
  backgroundSrc: ArrayBuffer
  title?: string
  category?: string
  description?: string | null
}

export function OpenGraphImage({
  title,
  category,
  backgroundSrc,
  description,
}: OpenGraphImageProps) {
  return (
    <div
      style={{
        display: "flex",
        width: size.width,
        height: size.height,
        padding: "53px 98px",
      }}
    >
      <img
        src={backgroundSrc as unknown as string}
        width={size.width}
        height={size.height}
        style={{ position: "absolute", top: 0, left: 0 }}
      />

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "flex-start",
        }}
      >
        <Logo style={{ marginBottom: "65px" }} />
        {category ? (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "13px",
              color: "rgba(14, 200, 172, 1)",
              fontFamily: "Satoshi",
              fontSize: "28px",
              fontWeight: 700,
              lineHeight: "37.8px",
              letterSpacing: "-0.03em",
              textAlign: "left",
              marginBottom: "26px",
            }}
          >
            <ThunderIcon /> {category}
          </div>
        ) : (
          <div
            style={{
              height: "65px",
            }}
          />
        )}
        <div
          style={{
            color: "rgba(240, 240, 240, 1)",
            fontFamily: "Satoshi",
            fontSize: "65px",
            fontWeight: 700,
            lineHeight: "87.75px",
            letterSpacing: "-0.03em",
            textAlign: "left",
            textWrap: "wrap",
            maxWidth: "719px",
          }}
        >
          {title}
        </div>
        {description ? (
          <div
            style={{
              color: "rgba(240, 240, 240, 0.8)",
              fontFamily: "Satoshi",
              fontSize: "28px",
              fontWeight: 400,
              lineHeight: "37.8px",
              letterSpacing: "-0.03em",
              textAlign: "left",
              textWrap: "wrap",
              maxWidth: "719px",
              marginTop: "26px",
              wordBreak: "break-all",
            }}
          >
            {description.length > 120
              ? `${description.slice(0, 120)}...`
              : description}
          </div>
        ) : null}
      </div>

      <div
        style={{
          display: "flex",
          position: "absolute",
          bottom: "53px",
          left: "98px",
          right: "98px",
          height: "7px",
          background: "rgba(14, 200, 172, 1)",
        }}
      />
    </div>
  )
}
