import * as React from "react";

const filterState = ["All", "Done", "Todo"] as const;
export type FilterState = typeof filterState[number];

type Props = {
  value: FilterState;
  onChange: (value: FilterState) => void;
};

export const Filter = ({ value, onChange }: Props) => {
  const handleClick = (
    key: FilterState,
    e: React.MouseEvent<HTMLAnchorElement>
  ) => {
    e.preventDefault();
    onChange(key);
  };

  return (
    <div className="panel-tabs">
      {filterState.map((state) => (
        <a
          href="#"
          onClick={(e) => handleClick(state, e)}
          className={state === value ? "is-active" : ""}
        >
          {state}
        </a>
      ))}
    </div>
  );
};