import React, { useState } from "react";
import styles from "./index.module.scss";
import { myData } from "@/utils/http";
function Detail() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className={styles.detail}>
      <div className="detail_top">
        <div className="topL">
          {myData.detail_modal.top.map((item, index) => (
            <div className={`item ${selectedIndex === index ? 'active' : ''}`} onClick={() => setSelectedIndex(index)} key={index}>
              {item.title}
            </div>
          ))}
        </div>
        <div className="topR">
          <div className="split"></div>
          <div className="txt">碑面</div>
        </div>
      </div>
      <div className="detail_bottom"> <div className="topL">
        {myData.detail_modal.bottom.map((item, index) => (
          <div className="item" key={index}>
            {item.title}
          </div>
        ))}
      </div>
        <div className="topR">
          <div className="split"></div>
          <div className="txt">碑侧</div>
        </div></div>
    </div>
  )
}

const MemoDetail = React.memo(Detail);

export default MemoDetail;
