"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}`;

  if (variant === "gradient") {
    titleClasses += " bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent";
  } else if (variant === "gold") {
    titleClasses += " text-pixel-gold";
  } else {
    titleClasses += " text-white";
  }

  return (
    <div className="text-center">
      <h1 className={titleClasses} {...props}>
        {variant === "gradient" ? (
          <span
            style={{
              textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
            }}
          >
            {children}
          </span>
        ) : (
          children
        )}
      </h1>
      {subtitle && (
        <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
          <span>✦</span>
          <span>{subtitle}</span>
          <span>✦</span>
        </div>
      )}
    </div>
  );
}