"use client";

import { useChainId } from "wagmi";

export function ChainIndicator() {
  const chainId = useChainId();

  const getChainName = (id: number): string => {
    switch (id) {
      case 1:
        return "Ethereum Mainnet";
      case 11155111:
        return "Sepolia Testnet";
      case 138:
        return "Solace Chain 138";
      default:
        return `Chain ${id}`;
    }
  };

  const getChainColor = (id: number): string => {
    switch (id) {
      case 1:
        return "text-blue-400";
      case 11155111:
        return "text-purple-400";
      case 138:
        return "text-green-400";
      default:
        return "text-gray-400";
    }
  };

  return (
    <div className="flex items-center gap-2">
      <div className={`text-sm font-medium ${getChainColor(chainId)}`}>
        {getChainName(chainId)}
      </div>
      <div className="text-xs text-gray-500">({chainId})</div>
    </div>
  );
}