"use client";

import { HTMLAttributes, ReactNode } from "react";

interface SectionTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  children: ReactNode;
  variant?: "default" | "gradient" | "gold";
  size?: "sm" | "md" | "lg" | "xl";
  subtitle?: ReactNode;
}

const sizeClasses = {
  sm: "text-2xl sm:text-3xl",
  md: "text-3xl sm:text-4xl md:text-5xl",
  lg: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl",
  xl: "text-5xl md:text-7xl",
};

export default function SectionTitle({
  children,
  variant = "default",
  size = "md",
  subtitle,
  className = "",
  ...props
}: SectionTitleProps) {
  const baseClasses = "font-gaming font-black tracking-tight mb-4";

  let titleClasses = `${baseClasses} ${sizeClasses[size]} ${className}`;

  const titleStyles: React.CSSProperties & {
    WebkitBackgroundClip?: string;
    WebkitTextFillColor?: string;
  } = {};
  if (variant === "gradient") {
    titleClasses += " bg-clip-text text-transparent";
    titleStyles.background = `linear-gradient(to right, var(--accent-color), var(--accent), var(--accent-color))`;
    titleStyles.WebkitBackgroundClip = "text";
    titleStyles.WebkitTextFillColor = "transparent";
  } else if (variant === "gold") {
    titleStyles.color = "var(--accent-color)";
  } else {
    titleStyles.color = "var(--foreground)";
  }

  return (
    <div className="text-center">
      <h1 className={titleClasses} style={titleStyles} {...props}>
        {variant === "gradient" ? (
          <span
            style={{
              textShadow: `0 0 30px color-mix(in srgb, var(--accent-color) 50%, transparent)`,
            }}
          >
            {children}
          </span>
        ) : (
          children
        )}
      </h1>
      {subtitle && (
        <div
          className="text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide"
          style={{ color: "var(--accent-color)" }}
        >
          <span>✦</span>
          <span>{subtitle}</span>
          <span>✦</span>
        </div>
      )}
    </div>
  );
}