import React, { useEffect, useState } from "react";
import Image from "next/image";
import logo from "../../../../public/twichLogo.png";
const LogoButton = () => {
  const [showLogo, setShowLogo] = useState(false);
  useEffect(() => {
    setShowLogo(true);
  }, [showLogo]);
  if (showLogo) {
    return (
      <>
        <a className="flex h-full flex-shrink items-center border-none bg-transparent py-2 px-2 normal-case hover:bg-transparent">
          <Image
            src={logo}
            alt="Twitch Logo"
            width={30}
            className="w-[1.45rem] max-w-[1.95rem]"
          />
        </a>
      </>
    );
  }
  return null;
};

export default LogoButton;