import ArrowIcon from "./icons/ArrowIcon";

interface FeatureItemProps {
  title: string;
  desc: string;
  video: string;
  handleHoverStart?: (video: string) => void;
  handleHoverEnd?: () => void;
}

function FeatureItem({
  title,
  desc,
  video,
  handleHoverStart,
  handleHoverEnd,
}: FeatureItemProps) {
  return (
    <div
      className="group relative"
      onMouseEnter={() => handleHoverStart && handleHoverStart(video)}
      onMouseLeave={() => handleHoverEnd && handleHoverEnd()}
    >
      <div className="relative border-b border-[#3D425C] py-16 flex justify-between items-center h-36 cursor-default overflow-hidden ">
        <div className="overflow-hidden py-2">
          <p className="group-hover:opacity-0 group-hover:-translate-y-[125%] transition-all 2xl:text-[32px] xl:text-2xl text-xl font-gilroy font-medium leading-none duration-300">
            {title}
          </p>
        </div>

        <p className="group-hover:opacity-100 group-hover:translate-y-0 opacity-0 translate-y-[100%] absolute transition-all w-4/5 duration-300 2xl:text-base text-sm">
          {desc}
        </p>

        <div className="group-hover:opacity-100 opacity-0 blur-[10px] absolute -top-[100%] left-0 transition-opacity duration-300">
          <img src="/images/blendings/8.svg" alt="" />
        </div>
      </div>
      <div className="group-hover:opacity-0 group-hover:translate-x-[100%] transition-all absolute top-[50%] right-0 -translate-y-[50%] mt-0.5 duration-300">
        <ArrowIcon />
      </div>
    </div>
  );
}

export default FeatureItem;
