'use client';

type Props = {
  view: 'candidat' | 'recruteur' | 'apropos';
  setView: (v: 'candidat' | 'recruteur' | 'apropos') => void;
};

export default function Modeswitch({ view, setView }: Props) {
  return (
    <section className="max-w-6xl px-4 mt-4 flex items-center justify-center gap-3">
      <button
        className={
          'btn-tab ' + (view === 'candidat' ? 'btn-tab-active' : 'btn-tab-inactive')
        }
        type="button"
        onClick={() => setView('candidat')}
      >
        Mode candidat senior
      </button>

      <button
        className={
          'btn-tab ' + (view === 'recruteur' ? 'btn-tab-active' : 'btn-tab-inactive')
        }
        type="button"
        onClick={() => setView('recruteur')}
      >
        Mode recruteur
      </button>

      <button
        className={
          'btn-tab ' + (view === 'apropos' ? 'btn-tab-active' : 'btn-tab-inactive')
        }
        type="button"
        onClick={() => setView('apropos')}
      >
        Mode À propos
      </button>
    </section>
  );
}