'use client'

import { useState } from 'react'

const TABS = ['Tous profils', 'Ingénieur']

interface Props {
  total: number
}

export function FilterTabs({ total }: Props) {
  const [active, setActive] = useState('Tous profils')

  return (
    <div className="ranking-controls reveal" style={{ opacity: 1, transform: 'none' }}>
      <div className="filter-tabs">
        {TABS.map((tab) => (
          <button
            key={tab}
            className={`filter-tab${active === tab ? ' active' : ''}`}
            onClick={() => setActive(tab)}
          >
            {tab}
          </button>
        ))}
      </div>
      <span className="ranking-count">
        Résultats 1–{Math.min(10, total)} sur {total} masters
      </span>
    </div>
  )
}