import React from 'react';
import style from './menu.css';
import { viewAtom} from "../atom/atom";
import { useRecoilState } from "recoil";

export function Menu() {
    const [view, setView] = useRecoilState(viewAtom);

    const classNames = ['', ''];
    const active = view === 'have' ? 0 : 1
    classNames[active] = 'active';

    return (
      <div>
        <ul>
          <li>
            <a onClick={() => {
                setView('have');
            }} className={classNames[0]}>Have</a>
          </li>
          <li>
            <a onClick={() => {
                setView('want');
            }} className={classNames[1]}>Want</a>
          </li>
        </ul>
      </div>
    );
}