import React from "react";
import styles from "./GradientText.module.css";

type GradientTextProps<T extends React.ElementType = "span"> = {
  as?: T;
  children: React.ReactNode;
  gradient?: string;
  animated?: boolean;
  speed?: string;
  className?: string;
  style?: React.CSSProperties;
} & Omit<
  React.ComponentPropsWithoutRef<T>,
  "as" | "children" | "className" | "style"
>;

function cn(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

function GradientText<T extends React.ElementType = "span">({
  as,
  children,
  gradient = "linear-gradient(90deg, #7E22CE 0%, #EC4899 50%, #22D3EE 100%)",
  animated = false,
  speed = "4s",
  className,
  style,
  ...props
}: GradientTextProps<T>) {
  const Component = as || "span";

  return (
    <Component
      className={cn(
        styles.gradientText,
        animated && styles.animated,
        className,
      )}
      style={
        {
          "--gradient-text-bg": gradient,
          "--gradient-text-speed": speed,
          ...style,
        } as React.CSSProperties
      }
      {...props}
    >
      {children}
    </Component>
  );
}

export default GradientText;