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-6 w-11 rounded-md p-0.5",
  md: "h-9 w-16 rounded-lg p-1",
  lg: "h-14 w-28 rounded-xl p-2",
};

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="112px" className="object-contain" />
    </div>
  );
}