import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { baseUrl } from "@/index";

const tabList = [
  { id: 1, name: "总览" },
  { id: 2, name: "村落" },
  { id: 3, name: "建筑" },
  { id: 4, name: "构件" },
];

function A1Home() {
  const [acId, setAcId] = useState(1);

  const cutTabFu = useCallback((id: number) => {
    setAcId(id);
  }, []);

  return (
    <div
      className={styles.A1Home}
      style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/bg.jpg)` }}
    >
      {/* 顶部tab */}
      <div
        className="A1tab"
        style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/tab.png)` }}
      >
        {tabList.map((v) => (
          <div
            onClick={() => cutTabFu(v.id)}
            className={classNames(
              "A1tabRow",
              acId === v.id ? "A1tabRowAc" : ""
            )}
            key={v.id}
          >
            {v.name}
          </div>
        ))}
      </div>
    </div>
  );
}

const MemoA1Home = React.memo(A1Home);

export default MemoA1Home;
