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 Chart4 from "../../component/chart/Chart4.jsx";
import ClusteredColumnChart from "../../component/chart/ClusteredColumnChart.jsx";
import Donut1 from "../../component/chart/Donut1.jsx";
import RowChart from "../../component/chart/RowChart.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import Calendar_agency from "../../component/Calendar_agency.jsx";
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import MedicationIcon from '@mui/icons-material/Medication';
import ElderlyIcon from '@mui/icons-material/Elderly';

export default function Main2() {
  const thead = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
  const key = ["No", "name","number", "birth", "phone", "address", "average"];
  const content = [
    {
      No: 1,
      name: "김복남",
      number: "00000001",
      birth: "1948.11.15",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
      average: "6회",
    },
  ];
  const thead2 = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도"];
  const key2 = ["No", "name","number", "birth", "phone", "address", "low", "high"];
  const content2 = [
    {
      No: 1,
      name: "김복남",
      number: "00000001",
      birth: "1948.11.15",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
      low: "6°C",
      high: "6°C",
    },
  ];

  return (
    <main>
      <div className="main-grid-agency">
        <ul className="content-box statistics-agency" background="#f7acba">
          <li> 
            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
            <p>나의 관리 대상자</p>
            <p>40</p>
          </li>
                  </ul>
        <ul className="content-box statistics-agency" background="#8ef3d1">
          <li>
           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
            <p>미복약 위험 대상자</p>
            <p>40</p>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#ebe7b9" >
          <li>
             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
            <p>댁내 온도 위험 대상자</p>
            <p>40</p>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#5f9af3">
          <li>
            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
            <p>배터리 부족 대상자 </p>
            <p>40</p>
          </li>
        </ul>       
       
        <div className="content-box bg-1 combine-left-government2 combine-middle-government">
          <div className="flex">
          <Title title={"복용률 통계"} explanation={"복용률 현황을 확인할 수 있습니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Chart2_agency />
        </div>
        <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
          <div className="flex">
          <Title title={"미복약 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Table
            className={"medicine-table"}
              head={thead}
              contents={content}
              contentKey={key}
              onClick={() => {
                navigate("/MedicineCareSelectOne");
              }}
            />
        </div>
        <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
          <div className="flex">
          <Title title={"댁내온도 위험 대상자 리스트"} explanation={"월별 약상자 사용 인원"} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Table
            className={"medicine-table"}
              head={thead2}
              contents={content2}
              contentKey={key2}
              onClick={() => {
                navigate("/MedicineCareSelectOne");
              }}
            />
        </div>
        <div className="content-box combine-right-government2 combine-bottom-government5">
          <div className="flex">
            <Title title={"나의 관리 대상자"} explanation={"지역별 대상자 현황을 확인할 수 있습니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Chart5_agency />
        </div>
        <div className="content-box combine-right-government combine-bottom-government2">
          <div className="flex">
          <Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
          </div>
          <Calendar_agency />
        </div>        
      </div>
    </main>
  );
}