import React from "react"
import { Text } from "@chakra-ui/react"

export const RainbowText = (props) => {
  return (
    <Text
      as="h1"
      sx={{
        "@keyframes moving-rainbow": {
          "0%": { backgroundPosition: "0 0" },
          "100%": { backgroundPosition: "calc(100px + 200%) 0" },
        },
        animation: "moving-rainbow 5s infinite linear",
        "::selection": {
          background: "transparent",
        },
        "::-moz-selection": {
          background: "transparent",
        },
      }}
      position="relative"
      maxWidth="100%"
      color="transparent"
      fontSize="6xl"
      fontWeight="bold"
      backgroundSize="calc(100px + 200%)"
      bgGradient="linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)"
      backgroundClip="text"
      userSelect="none"
      outline="none"
      contentEditable={props?.ce}
      spellCheck="false"
    >
      {props?.children}
    </Text>
  )
}