import React from "react";
import { searchTypes, audioOptions } from "../Options/Options";
import "./More.scss";
import flat from "./2d.png";
import thrD from "./3d.png";

const displayModes = [
  {
    id: 0,
    name: "2D",
    bg: flat,
  },
  {
    id: 1,
    name: "3D",
    bg: thrD,
  },
];
const More = ({
  showHeadBar,
  displayMode,
  searchType,
  onClickDisplayMode,
  onClickSearchType,
}) => {
  return (
    <div className={"more " + (showHeadBar ? "has-header-top" : "")}>
      <div className="types">
        {searchTypes.map(({ id, name, bg, bgb }) => (
          <div
            key={id}
            className={"btn " + (searchType === id ? "active" : "")}
            onClick={() => {
              onClickSearchType(id);
            }}
          >
            <img src={searchType === id ? bgb : bg} />
            <div>{name}</div>
          </div>
        ))}
      </div>

      <div
        className="btn big"
        onClick={() => onClickDisplayMode(displayMode == 0 ? 1 : 0)}
      >
        <img src={displayMode == 0 ? flat : thrD}></img>
        {displayMode == 0 ? "2D" : "3D"}
      </div>
    </div>
  );
};
export default More;