"use client";

import classNames from "classnames";
import Image from "next/image";
import Link from "next/link";
import mawidiLogo from "@/app/mawidi-icon.png";

type BrandLogoTone = "default" | "light";
type BrandLogoSize = "sm" | "md" | "lg";

interface BrandLogoProps {
  href?: string;
  className?: string;
  wordmarkClassName?: string;
  showWordmark?: boolean;
  tone?: BrandLogoTone;
  size?: BrandLogoSize;
}

const SIZE_STYLES: Record<BrandLogoSize, { mark: string; pad: string }> = {
  sm: { mark: "h-9 w-9", pad: "p-1" },
  md: { mark: "h-10 w-10", pad: "p-1.5" },
  lg: { mark: "h-14 w-14", pad: "p-1.5" },
};

function BrandLogoInner({
  className,
  tone,
  size,
}: {
  className: string;
  tone: BrandLogoTone;
  size: BrandLogoSize;
}) {
  const styles = SIZE_STYLES[size];

  return (
    <span className={classNames("inline-flex items-center", className)}>
      <span
        className={classNames(
          "inline-flex shrink-0 items-center justify-center rounded-xl",
          styles.mark,
          tone === "light" ? `bg-white/95 ${styles.pad}` : "",
        )}
      >
        <Image
          src={mawidiLogo}
          alt="Mawidi logo"
          className="h-full w-full object-contain"
          priority
        />
      </span>
    </span>
  );
}

export default function BrandLogo({
  href,
  className,
  tone = "default",
  size = "md",
}: BrandLogoProps) {
  const content = (
    <BrandLogoInner className={className ?? ""} tone={tone} size={size} />
  );

  if (!href) {
    return content;
  }

  return (
    <Link href={href} aria-label="Mawidi">
      {content}
    </Link>
  );
}