"use client";

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

type HeadlineProps = {
  text: string;
};

const Headline: React.FC<HeadlineProps> = ({ text }) => {
  const headlineRef = useRef<HTMLHeadingElement | null>(null);

  useEffect(() => {
    if (!headlineRef.current) return;

    gsap.from(headlineRef.current, {
      y: 80,
      opacity: 0,
      duration: 1,
      ease: "expo.out",
      scrollTrigger: {
        trigger: headlineRef.current,
        start: "top 90%",
        toggleActions: "play none none none",
      },
    });
  }, []);

  return (
    <div className="overflow-hidden">
      <h6
        ref={headlineRef}
        className="bg-light-300 border-border font-switzer sm:text-b-4-14 tab:text-b-3-16 text-border sm:leading-b4 tab:leading-b2 tab:px-4 w-max rounded-full border py-1.5 font-normal sm:px-2.5"
      >
        {text}
      </h6>
    </div>
  );
};

export default Headline;