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

/**
 * Site logo. When `src` (the CMS `companyLogo`) is provided it renders that
 * image; otherwise it falls back to the text "wedigtech" wordmark. Either way
 * the wordmark sits inside a green→blue gradient rounded-border pill (the
 * gradient frame is pure CSS — the uploaded asset stays a clean wordmark).
 */
export function Logo({ src = "", className = "" }: { src?: string; className?: string }) {
  return (
    <Link
      href="/"
      aria-label="wedigtech home"
      className={`group inline-flex items-center ${className}`}
    >
      {/* Masked gradient border keeps the logo center transparent. */}
      <span className="logo-gradient-border rounded-2xl p-[2px]">
        <span className="flex items-center justify-center rounded-[14px] bg-transparent px-5 py-2.5">
          {src ? (
            <Image
              src={src}
              alt="wedigtech"
              width={260}
              height={80}
              priority
              className="h-11 w-auto object-contain"
            />
          ) : (
            <span className="font-display text-xl font-bold leading-none tracking-tight text-ink">
              wedig<span className="text-gradient-green">tech</span>
            </span>
          )}
        </span>
      </span>
    </Link>
  );
}