import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Calendar from "../../component/Calendar.jsx";
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 ErrorIcon from '@mui/icons-material/Error';

export default function Main_guardian() {
  const tableHead1 = ["", "", "", "", "", ""];
  const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
  const content1 = [
    {
      morning: "아침",
      morning2:(
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
      lunch: "점심",
      lunch2: (
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
      dinner: "저녁",
      dinner2: (
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
    }
  ];
  const tableHead2 = ["", "", "", "", "", ""];
  const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
  const content2 = [
    {
      morning: "아침",
      morning2:(
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
      lunch: "점심",
      lunch2: (
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
      dinner: "저녁",
      dinner2: (
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
    }
  ];
  const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
  const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
  const content3 = [
    {
      mon: "24°C",
      tue: "24°C",
      wed: "24°C",
      thu: "24°C",
      fri: "24°C",
      sat: "24°C",
      sun: "24°C",
    }
  ];


  return (
    <>
      <main>
        <div className="main-grid-guardian">
          <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>
            <Calendar />
          </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="flex">
                <p className="guardian-table-text">어제</p>
                <p className="guardian-table-inner"><Table
              className={"guardian-table"}
              head={tableHead1}
              contents={content1}
              contentKey={Key1}
            /></p>
              </li>
            <li className="flex">
                <p className="guardian-table-text">2일 전</p>
                <p className="guardian-table-inner"><Table
              className={"guardian-table"}
              head={tableHead2}
              contents={content2}
              contentKey={Key2}
            /></p>
              </li>
              <li className="flex">
                <p className="guardian-table-text">3일 전</p>
                <p className="guardian-table-inner"><Table
              className={"guardian-table"}
              head={tableHead1}
              contents={content1}
              contentKey={Key1}
            /></p>
              </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="flex">
                <p className="guardian-table-inner"><Table
              className={"guardian-table1"}
              head={tableHead3}
              contents={content3}
              contentKey={Key3}
            /></p>
              </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>
            <p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
            </li>
          </ul>
          <div className="content-box combine-left combine-all-government">
            <Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} />

          </div>
        </div>
      </main>
    </>
  );
}