import "./index.css";
interface Name {
  name: string;
}
interface nameListProps {
  nameList: Name[];
  activeName: string;
  setActiveName: (name: string) => void;
}
function SwitchButton(props: nameListProps) {
  return (
    <div className="switch-button">
      {props.nameList.map((item, index) => {
        return (
          <button
            key={item.name}
            className={props.activeName === item.name ? "active" : ""}
            onClick={() => {
              props.setActiveName(item.name);
            }}
          >
            {item.name}
          </button>
        );
      })}
    </div>
  );
}
export default SwitchButton;