import { NavLink } from 'react-router-dom'
import type { Chain } from '@features/wallet'
import { COIN_ICONS } from '@shared/assets/coins'
import styles from './WalletChainTabs.module.css'

interface TabItem {
  chain: Chain
  label: string
  icon: string
}

const TABS: TabItem[] = [
  { chain: 'BTC', label: 'BTC', icon: COIN_ICONS.BTC },
  { chain: 'ETH', label: 'ETH', icon: COIN_ICONS.ETH },
  { chain: 'SOL', label: 'SOL', icon: COIN_ICONS.SOL },
  { chain: 'TRX', label: 'TRX', icon: COIN_ICONS.TRX },
  { chain: 'BSC', label: 'BSC', icon: COIN_ICONS.BNB },
]

const allCoinsIcon = (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <ellipse cx="12" cy="6" rx="8" ry="3" />
    <path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" />
    <path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
  </svg>
)

export function WalletChainTabs() {
  return (
    <div className={styles.tabs}>
      <NavLink
        to="/wallet"
        end
        className={({ isActive }) => `${styles.tab} ${isActive ? styles.active : ''}`}
      >
        <span className={styles.icon}>{allCoinsIcon}</span>
        <span>Все монеты</span>
      </NavLink>
      {TABS.map((t) => (
        <NavLink
          key={t.chain}
          to={`/wallet/${t.chain.toLowerCase()}`}
          className={({ isActive }) => `${styles.tab} ${isActive ? styles.active : ''}`}
        >
          <img src={t.icon} alt={t.label} className={styles.icon} />
          <span>{t.label}</span>
        </NavLink>
      ))}
    </div>
  )
}