import type { StakeChain } from '@features/staking'
import { CHAIN_TABS } from '../model/meta'
import styles from './ChainToggle.module.css'

interface Props {
  value: StakeChain
  onChange: (chain: StakeChain) => void
}

export function ChainToggle({ value, onChange }: Props) {
  return (
    <div className={styles.toggle}>
      {CHAIN_TABS.map(({ chain, label }) => (
        <button
          key={chain}
          className={`${styles.tab} ${value === chain ? styles.active : styles.inactive}`}
          onClick={() => onChange(chain)}
        >
          {label}
        </button>
      ))}
    </div>
  )
}
