import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart from "../../component/chart/Chart.jsx";
import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import Calendar_agency from "../../component/Calendar_agency.jsx";
import tool from "../../../resources/files/images/tool.png";
import medicinebox from "../../../resources/files/images/medicinebox.png";
import box from "../../../resources/files/images/box.png";
import exchange from "../../../resources/files/images/exchange.png";
import error from "../../../resources/files/images/error.png";
import batteryAgency from "../../../resources/files/images/batteryAgency.png";
import medicineAgency from "../../../resources/files/images/medicineAgency.png";
import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
import TitleSmall from "../../component/TitleSmall.jsx";

export default function Main2() {
  const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
  const key = ["No", "agency", "division", "phone", "address",];
  const content = [
    {
      No: 1,
      agency: "A복지관",
      division: "교환",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
    },
  ];

  const data = [
    {
      id: 1,
      title: "교환/수리 리스트",
      description: (
				<Table
					className={"agency-visitlist"}
					head={thead}
					contents={content}
					contentKey={key}
				/>
			),
    },
    {
      id: 2,
      title: "장비 추가 리스트",
      description: (
				<Table
					className={"agency-visitlist"}
					head={thead}
					contents={content}
					contentKey={key}
				/>
			),
    },
  ]
  const [index, setIndex] = React.useState(1);
 

  return (
    <main>
      <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 및 업체 현황"} explanation={"2023.02.28 기준"} /></div>
      <div className="main-grid-agency margin-bottom2">
        <ul className="content-box statistics-agency" background="#f7acba">
          <li className="flex-start">
            <img src={box} alt="" />
            <div className="text">
              <p>전체 장비 대여 수</p>
              <p className="equipcount">40</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#8ef3d1">
          <li className="flex-start">
            <img src={error} alt="" />
            <div className="text">
              <p>계약 업체 수</p>
              <p className="equipcount">40</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#ebe7b9" >
          <li className="flex-start">
            <img src={exchange} alt="" />
            <div className="text">
              <p>교환/수리 요청 수</p>
              <p className="equipcount">40</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#5f9af3">
          <li className="flex-start">
            <img src={error} alt="" />
            <div className="text">
              <p>추가 요청 장비 수 </p>
              <p className="equipcount">40</p>
            </div>
          </li>
        </ul>
      </div>
      <div className="flex-start margin-bottom2"><img src={tool} alt="" /><TitleSmall title={"장비 관리 리스트"}  /></div>
      <div className="main-grid-agency">
        <div className="content-box combine-left-government3">
          <ul className="tab-menu-agency flex-start">
            {data.map((item) => (
              <li
                key={item.id}
                className={index === item.id ? "active" : null}
                onClick={() => setIndex(item.id)}
              >
                {item.title}
              </li>
            ))}
          </ul>
          <div>
          <div className="margin-bottom2">
              <Calendar_agency />
            </div>                          
            <ul className="tab-content">
              {data
                .filter((item) => index === item.id)
                .map((item) => (
                  <li>{item.description}</li>
                ))}
            </ul>
          </div>
        </div>
      </div>
    </main>
  );
}