Horizon

"use client";

import { useState } from "react";

import { cn } from "@/lib/utils";
import { ExampleProps } from "@/types/type";

export const Horizon = ({ children, className }: ExampleProps) => {
  const [isHover, setIsHover] = useState(false);
  const handleMouseEnter = () => {
    setIsHover(true);
  };

  const handleMouseLeave = () => {
    setIsHover(false);
  };
  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={cn(
        "relative flex size-full justify-center rounded-xl",
        className
      )}
    >
      <div className="absolute top-0 flex w-full items-center justify-center">
        <div
          className={cn(
            "h-[1px] w-[10px] bg-gradient-to-r from-[rgba(17,17,17,0)] via-yellow-100 to-[rgba(17,17,17,0)] opacity-0 transition-all duration-500",
            isHover && "w-[100px] opacity-100 duration-500"
          )}
        />
      </div>
      {children}
    </div>
  );
};