import { forwardRef, type ImgHTMLAttributes } from 'react';
import * as React from "react";
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";

export function TiDBCloudIcon(props: SvgIconProps) {
  return (
    <SvgIcon viewBox="0 0 46 33" fill="none" {...props}>
      <path
        d="M35.9248 7.61762C31.7538 0.352092 22.4865 -2.15414 15.2228 2.01684C11.3141 4.2608 8.60754 8.12761 7.83528 12.5663C2.39114 13.8286 -0.998471 19.2654 0.263753 24.7077C1.32745 29.2958 5.41465 32.5434 10.1248 32.5415C10.4672 32.5415 10.8096 32.5233 11.1502 32.4887H31.8758C32.2146 32.516 32.5552 32.5415 32.9013 32.5415C39.8863 32.5415 45.5472 26.8788 45.5472 19.8956C45.5472 14.0763 41.5765 9.00916 35.9266 7.6158L35.9248 7.61762ZM22.7598 12.437V26.0628L18.8438 23.8043V14.6992L14.926 16.9614V12.4388L22.7598 7.91451L26.6757 10.1749L22.7598 12.4352V12.437ZM30.6318 21.5312L26.6994 23.8007V14.7229L30.6318 12.4498V21.5312Z"
        fill="#333333"
      />
    </SvgIcon>
  );
}

export function VerticalDivider(props: SvgIconProps) {
  return (
    <SvgIcon viewBox="0 0 1 17" fill="none" {...props}>
      {/* <path
        d="M0.5 0.5V15.5"
        stroke="#333333"
        strokeOpacity="0.5"
        strokeLinecap="round"
      /> */}
      <rect width="1" height="17" fill="#333333" />
    </SvgIcon>
  );
}

export function TiDBCloudLogo(props: SvgIconProps) {
  return (
    <SvgIcon viewBox="0 0 256.74 256.74" {...props}>
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1798.23"
          y1="-5866.36"
          x2="1803.95"
          y2="-5872.2"
          gradientTransform="translate(-54830.49 -127812.94) scale(30.52 -21.8)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#e30c34" />
          <stop offset="1" stopColor="#b7062c" />
        </linearGradient>
      </defs>
      <g id="Layer_1" data-name="Layer 1">
        <g>
          <rect fill="none" width="256.74" height="256.74" />
          <g id="Group_1794" data-name="Group 1794">
            <path
              id="Path_4369"
              data-name="Path 4369"
              fill="url(#linear-gradient)"
              d="M202.51,79.58c-23.51-40.94-75.76-55.07-116.7-31.55-22.03,12.65-37.29,34.44-41.64,59.47C13.48,114.6-5.63,145.24,1.49,175.93c5.99,25.86,29.04,44.17,55.58,44.16,1.93,0,3.86-.1,5.78-.29h116.83c1.91,.15,3.83,.29,5.78,.29,39.37,0,71.29-31.92,71.29-71.29,0-32.8-22.38-61.37-54.23-69.22h0Z"
            />
            <g id="Group_1793" data-name="Group 1793">
              <path
                id="Path_4370"
                data-name="Path 4370"
                fill="#fff"
                d="M128.29,81.27l-44.16,25.5v25.49l22.09-12.75v51.32l22.08,12.73h0V106.75l22.08-12.75-22.08-12.74Z"
              />
              <path
                id="Path_4371"
                data-name="Path 4371"
                fill="#fff"
                d="M150.5,119.64v51.17l22.17-12.8v-51.19l-22.17,12.81Z"
              />
            </g>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
}

export const TiDBLogoRed = forwardRef<HTMLImageElement, Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>>((props, ref) => {
  return (
    <img ref={ref} src='/img/tidb-logo.png' alt='TiDB Logo' width={24} {...props} />
  )
});
TiDBLogoRed.displayName = 'TiDBLogoRed';

export function ScalableIcon(props: SvgIconProps) {
  return (
    <SvgIcon viewBox="0 0 14 14" fill="none" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.91995 0H2H0V2V12V14H2H12H14V12V10.08H12V12H2V2H3.91995V0Z"
        fill="inherit"
      />
      <path
        d="M8.39992 10.08H3.91992V5.6H5.1333V8.1704L11.7466 1.28735H9.51992V0H13.9999V4.48H12.7421V2.01919L6.06668 8.86667H8.39997L8.39992 10.08Z"
        fill="inherit"
      />
    </SvgIcon>
  );
}
