import { mergeProps } from "solid-js"

interface Props {
  /** 过渡的开始颜色 */
  startColor?: string
  /** 过渡的结束颜色 */
  endColor?: string
}

const CornerBottom = (props: Props) => {
  const merged = mergeProps(
    {
      startColor: "#28aff0",
      endColor: "#120fc4",
    },
    props,
  )
  return (
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      height="896"
      width="967.8852157128662"
    >
      <defs>
        <path
          id="path-2"
          opacity="1"
          fill-rule="evenodd"
          d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
        />
        <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
          <stop offset="0" stop-color={merged.startColor} stop-opacity="1" />
          <stop offset="1" stop-color={merged.endColor} stop-opacity="1" />
        </linearGradient>
      </defs>
      <g opacity="1">
        <use
          xlink:href="#path-2"
          fill="url(#linearGradient-3)"
          fill-opacity="1"
        />
      </g>
    </svg>
  )
}

export default CornerBottom