import Image from "next/image";
import Link from "next/link";

const SiteLogo = () => {
  return (
    <Link href="/" className="flex items-center gap-1">
      <div
        className="relative overflow-hidden w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] lg:w-[150px] lg:h-[150px]"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Image
          src="/assets/images/logo_no_bg.png"
          alt="Logo"
          width={150}
          height={150}
          priority
          style={{ objectFit: "contain", marginTop: 4 }}
        />
      </div>
      <span className="font-mono text-xl sm:text-2xl lg:text-3xl z-100">
        LAN CODES
      </span>
    </Link>
  );
};

export default SiteLogo;