"use client";

import { cn } from "@/lib/utils";
import Image from "next/image";
import React from "react";

function Hero() {
  const [hovered, setHovered] = React.useState("");

  const textHover =
    "hover:text-primary hover:scale-105 transition-all duration-300";
  return (
    <>
      <div className="text-5xl lg:text-7xl rounded-md group font-bold max-w-xs lg:max-w-md mx-auto text-right  flex flex-col relative cursor-default  ">
        <span
          className={cn(
            `absolute left-4 lg:left-0 bottom-full z-10 ${textHover}`,
            hovered === "text-2" && "text-background blur-sm"
          )}
          onMouseEnter={() => setHovered("text-1")}
          onMouseLeave={() => setHovered("")}
        >
          Timeless
        </span>
        <div className="flex gap-4 justify-end items-center pr-4 lg:pr-0">
          <div
            className={cn(
              `size-12 rounded-full bg-background origin-right
              relative overflow-hidden transition-all duration-300 opacity-0 `,
              hovered === "text-2" && "scale-[300%] bg-primary opacity-100"
            )}
          >
            <Image src={"/hero.gif"} alt="herp-gif" fill />
          </div>
          <span
            className={textHover}
            onMouseEnter={() => setHovered("text-2")}
            onMouseLeave={() => setHovered("")}
          >
            Creative
          </span>
        </div>
        <span
          onMouseEnter={() => setHovered("text-3")}
          onMouseLeave={() => setHovered("")}
          className={cn(
            `absolute left-4 lg:left-0 top-full ${textHover}`,
            hovered.length ? "text-foreground" : "text-primary",
            hovered === "text-2" && "text-background blur-sm"
          )}
        >
          Unique
        </span>
      </div>
    </>
  );
}

export default Hero;