import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart1 from "../../component/chart/Chart1.jsx";
import Chart2 from "../../component/chart/Chart2.jsx";
import Calendar from "../../component/Calendar.jsx";
import AddCircleIcon from '@mui/icons-material/AddCircle';
import PersonIcon from '@mui/icons-material/Person';


export default function Main2() {

  const tableHead = [
    "연번",
    "계약업체명",
    "반납/교환",
    "담당자 연락처",
    "주소",
  ];
  const Key = [
    "name",
    "level_of_care",
    "birth",
    "phone",
    "address",
  ];
  const content = [
    {
      name: "1",
      level_of_care: "A복지관",
      birth: "교환",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "2",
      level_of_care: "B병원",
      birth: "반납",
      phone: "010-3333-3333",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "3",
      level_of_care: "C복지관",
      birth: "교환",
      phone: "010-3333-4444",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "4",
      level_of_care: "D복지관",
      birth: "교환",
      phone: "010-3333-5555",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "5",
      level_of_care: "E복지관",
      birth: "반납",
      phone: "010-3333-6666",
      address: "경상북도 군위군 삼국유사면",
    },
  ];
  const tableHead2 = [
    "연번",
    "계약업체명",
    "반납/교환",
    "담당자 연락처",
    "주소",
  ];
  const Key2 = [
    "name",
    "level_of_care",
    "birth",
    "phone",
    "address",
  ];
  const content2 = [
    {
      name: "1",
      level_of_care: "A복지관",
      birth: "교환",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "2",
      level_of_care: "B병원",
      birth: "반납",
      phone: "010-3333-3333",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "3",
      level_of_care: "C복지관",
      birth: "교환",
      phone: "010-3333-4444",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "4",
      level_of_care: "D복지관",
      birth: "교환",
      phone: "010-3333-5555",
      address: "경상북도 군위군 삼국유사면",
    },
    {
      name: "5",
      level_of_care: "E복지관",
      birth: "반납",
      phone: "010-3333-6666",
      address: "경상북도 군위군 삼국유사면",
    },
  ];

  return (
    <main>
      <div className="main-grid">
        <ul className="content-box statistics flex combine-left">
          <li>
            <p>전체 장비 대여수</p>
            <p>200개</p>
          </li>
          <li>
            <p>계약 업체 수</p>
            <p>20개 </p>
          </li>
          <li>
            <p>교환 예정 장비 수</p>
            <p>3개</p>
          </li>
          <li>
            <p>반납 예정 장비 수</p>
            <p>10개</p>
          </li>
        </ul>
        <div className="content-box combine-left">
          <div className="flex margin-bottom">
            <Title title={"금일 반납/교환 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <div className="flex" >
            <div style={{ width:"50%" }}><Calendar /></div>
            <div style={{ width:"50%" }}><Table head={tableHead} contents={content} contentKey={Key} /></div>
          </div>

        </div>          
        <div className="content-box combine-left">
          <div className="flex margin-bottom">
            <Title title={"약상자 추가 예정 리스트"} explanation={"장비 반납/교환 리스트를 확인하세요."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Table head={tableHead2} contents={content2} contentKey={Key2} />
        </div>          
      </div>
    </main>
  );
}