import { useNavigate } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import styles from './SwapBridgeTabs.module.css'

interface Props {
  active: 'swap' | 'bridge'
}

export function SwapBridgeTabs({ active }: Props) {
  const navigate = useNavigate()

  return (
    <div className={styles.tabs}>
      <button
        className={`${styles.tab} ${active === 'swap' ? styles.active : styles.inactive}`}
        onClick={() => navigate(ROUTES.SWAP)}
      >
        СВОП
      </button>
      <button
        className={`${styles.tab} ${active === 'bridge' ? styles.active : styles.inactive}`}
        onClick={() => navigate(ROUTES.BRIDGE)}
      >
        БРИДЖ
      </button>
    </div>
  )
}
