import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import ArrowLeftBlueP from "@/components/icons/ArrowLeftBlueP";
import LocationP from "@/components/icons/LocationP";
import { Button } from "@mui/material";
import Image from "next/image";
import React from "react";

function Head({ data, loading }) {
  return (
    <div className="flex w-full flex-col items-center justify-start">
      <CircularLoading width={80} height={80} loading={loading}>
        <Image src={data.src} height={80} width={80} alt="profile" />
      </CircularLoading>
      <div className={loading ? "mt-[8px] mb-[4px]" : ""}>
        <TextLoading width={60} height={18} loading={loading}>
          <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px] dark:text-[#fafafa]">
            {data.name}
          </p>
        </TextLoading>
      </div>
      <div className="flex items-center justify-center gap-[8px]">
        <LocationP />
        <TextLoading width={55} height={16} loading={loading}>
          <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
            نماینده شهر اهواز
          </p>
        </TextLoading>
      </div>
      <div className="flex items-center justify-center my-[16px]">
        <div className="flex flex-col items-center justify-center">
          <p className="text-[#9B9B9B] text-[14px] font-normal dark:text-[#A1A1A1]">
            کل بیماران
          </p>
          <TextLoading width={55} height={16} loading={loading}>
            <p className="text-[#3B3B3B] text-[14px] font-medium dark:text-[#A1A1A1]">
              {data.all_patients}
            </p>
          </TextLoading>
        </div>
        <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px] dark:bg-[#343645]"></span>
        <div className="flex flex-col items-center justify-center">
          <p className="text-[#9B9B9B] text-[14px] font-normal dark:text-[#A1A1A1]">
            کل نوبت ها
          </p>
          <TextLoading width={55} height={16} loading={loading}>
            <p className="text-[#3B3B3B] text-[14px] font-medium dark:text-[#A1A1A1]">
              {data.total_turns}
            </p>
          </TextLoading>
        </div>
      </div>
      <Button
        className="!flex !p-1 !items-center !justify-center !text-[#5559CE] !text-[14px] !font-medium"
        variant="text"
      >
        مشاهده اطلاعات نماینده
        <ArrowLeftBlueP />
      </Button>
    </div>
  );
}

export default Head;