import React from "react";
import Icon from "../images/icon.svg";
import Link from "next/link";
import Image from "next/image";

interface LogoProps {
  label?: string;
  className?: string;
}

function Logo({ label, className }: LogoProps) {
  return (
    <Link
      href={
        label !== undefined
          ? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
          : "/"
      }
      className={className ?? "" + " flex flex-row items-center justify-center"}
      target={label !== undefined ? "_blank" : ""}
    >
      {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}

      <Image priority src={Icon} alt="Follow us on Twitter" width={40} />
      {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>
      ) : (
        <></>
      )}
    </Link>
  );
}

export default Logo;