"use client";

import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";

export function BrandMark({
  href = "/",
  className,
  size = "md",
}: {
  href?: string;
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const box = {
    sm: "h-8 w-[140px]",
    md: "h-10 w-[180px] md:h-11 md:w-[200px]",
    lg: "h-14 w-[240px] md:h-16 md:w-[280px]",
  };

  return (
    <Link href={href} className={cn("inline-flex items-center", className)} aria-label="305 GAMING">
      <span className={cn("relative block", box[size])}>
        <Image
          src="/logo-305.png"
          alt="305 GAMING"
          fill
          className="object-contain object-left"
          sizes="(max-width: 768px) 180px, 280px"
          priority
          unoptimized
        />
      </span>
    </Link>
  );
}