import React from "react";
import logo from "@/images/icon.svg";
import Image from "next/image";

interface LogoProps {
  label?: string;
}

function Logo({ label }: LogoProps) {
  return (
    <a
      href={
        label !== undefined
          ? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
          : "/"
      }
      className="group relative cursor-pointer"
      target={label !== undefined ? "_blank" : ""}
    >
      {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
      <Image src={logo} alt="Logo" priority={true}/>
      {label !== undefined ? (
        <span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
          {label}
        </span>
      ) : (
        <></>
      )}
    </a>
  );
}

export default Logo;