import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

// Type helpers to enforce the correct format
type TailwindSize = `[${number}px]`;
type TailwindTextSize = `text-${TailwindSize}`;
type TailwindLeading = `leading-${TailwindSize}`;
type TailwindDesktopTextSize = `lg:text-${TailwindSize}`;
type TailwindDesktopLeading = `lg:leading-${TailwindSize}`;

interface HeroTextProps {
  text: string;
  subtitle?: string;
  subtitleClasses?: string;
  titleClasses?: string;
  withLineClamp?: boolean;
  desktopFontSize?: TailwindDesktopTextSize;
  desktopLeading?: TailwindDesktopLeading;
  mobileFontSize?: TailwindTextSize;
  mobileLeading?: TailwindLeading;
}

const HeroText = ({
  text,
  subtitle,
  subtitleClasses = '',
  titleClasses = '',
  withLineClamp = false,
  desktopFontSize = 'lg:text-[72px]',
  desktopLeading = 'lg:leading-[64px]',
  mobileFontSize = 'text-[35px]',
  mobileLeading = 'leading-[35px]',
}: HeroTextProps) => {
  const commonClasses = `font-sans font-medium text-foreground-primary ${withLineClamp ? 'line-clamp-1' : ''} select-none whitespace-pre-wrap`;

  const responsiveClasses = `${mobileFontSize} ${mobileLeading} ${desktopFontSize} ${desktopLeading}`;

  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 40 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, ease: [0.4, 0, 0.2, 1] }}
    >
      <h1 className={`${commonClasses} ${responsiveClasses} ${titleClasses}`}>
        {text}
      </h1>
      {subtitle && (
        <h2
          className={`mt-4 text-center text-[16px] text-foreground-primary text-white/70 ${subtitleClasses}`}
        >
          {subtitle}
        </h2>
      )}
    </motion.div>
  );
};

export default HeroText;