import React from "react";
import ClearIcon from '@mui/icons-material/Clear';
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import MedicationIcon from '@mui/icons-material/Medication';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import Chart2_guard from "../../../component/chart/Chart2_guard.jsx";
import Chart from "../../../component/chart/Chart.jsx";
import Chart1 from "../../../component/chart/Chart1.jsx";
import LineColor from "../../../component/chart/LineColor.jsx";
import ContentTitle from "../../../component/ContentTitle.jsx";

export default function GuardianStatistics() {



  return (
    <>
      <main>
        <ContentTitle contentTitle={"그래프로 한눈에 보기"} />
        <div className="statistics-grid">
          <ul className="content-box statistics-guardian">
            <li className="flex-start">
              <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
              <p>방문 그래프</p>
              <p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
            </li>
            <li className="chart-guardian">
              <Chart />
            </li>
          </ul>
          <ul className="content-box statistics-guardian">
            <li className="flex-start">
              <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
              <p>복약 체크</p>
              <p>약을 잘 복용하고 계신지 체크해주세요</p>
            </li>
            <li className="chart-guardian">
              <Chart1 />
            </li>
          </ul>
          <ul className="content-box statistics-guardian">
            <li className="flex-start">
              <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
              <p>온도 체크</p>
              <p>댁내 온도가 적절한지 체크해보세요.</p>
            </li>
            <li className="chart-guardian">
              <LineColor />
            </li>
          </ul>
          <ul className="content-box statistics-guardian">
            <li className="flex-start">
              <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
              <p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
              <p></p>
            </li>
            <li className="chart-guardian">
              <Chart2_guard />
            </li>
          </ul>
        </div>
      </main>
    </>
  );
}