import CalendarAdD from "@/components/icons/CalendarAdD";
import CardTickD from "@/components/icons/CardTickD";
import { Button } from "@mui/material";
import Image from "next/image";

function Head({ user }) {
  return (
    <div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
      <div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
        <div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
          <p className="text-[#3B3B3B] text-[16px] font-bold">
            {user.name}{" "}
            <span className="text-[#3B3B3B] text-[16px] font-normal">
              عزیز!
            </span>
          </p>
          <p className="text-[#616161] text-[12px] font-normal">
            در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت
            کنید.{" "}
          </p>
          <Button
            variant="contained"
            className="!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]"
          >
            مشاهده اطلاعات
          </Button>
        </div>
        <Image
          className="w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]"
          src="/assets/images/male-doctor-head-dashboard.png"
          alt="doctor"
          height={175}
          width={171}
        />
      </div>
      <div className="flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]">
        <div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
          <div className="bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
            <CardTickD />
          </div>
          <div className="flex flex-col gap-[8px] items-start justify-start">
            <p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
              {user.total_transactions}{" "}
              <span className="text-[12px]">تومان</span>
            </p>
            <p className="text-[#616161] text-nowrap text-[14px] font-normal">
              مجموع تراکنش ها
            </p>
          </div>
        </div>
        <div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
          <div className="bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
            <CalendarAdD />
          </div>
          <div className="flex flex-col gap-[8px] items-start justify-start">
            <p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
              {user.number_of_turns}
            </p>
            <p className="text-[#616161] text-nowrap text-[14px] font-normal">
              تعداد نوبت های شما
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Head;