import Image from "next/image";
import { NetworkId } from "@/lib/types";
import { getNetwork } from "@/lib/mock-data";
import { cn } from "@/lib/cn";

const sizeMap = {
  sm: "h-8 w-14 rounded-xl p-1",
  md: "h-11 w-20 rounded-2xl p-1.5",
  lg: "h-20 w-44 rounded-3xl p-3",
};

export function NetworkBadge({
  network,
  size = "md",
  className,
}: {
  network: NetworkId;
  size?: keyof typeof sizeMap;
  className?: string;
}) {
  const info = getNetwork(network);
  if (!info) return null;

  return (
    <div
      className={cn(
        "relative flex shrink-0 items-center justify-center border border-black/5 bg-white shadow-sm",
        sizeMap[size],
        className
      )}
    >
      <Image
        src={info.logo}
        alt={`${info.label} logo`}
        fill
        sizes="176px"
        className="object-contain"
      />
    </div>
  );
}