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]">{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">نماینده شهر اهواز</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">کل بیماران</p>
                    <TextLoading width={55} height={16} loading={loading}>
                        <p className="text-[#3B3B3B] text-[14px] font-medium">{data.all_patients}</p>
                    </TextLoading>
                </div>
                <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
                <div className="flex flex-col items-center justify-center">
                    <p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
                    <TextLoading width={55} height={16} loading={loading}>
                        <p className="text-[#3B3B3B] text-[14px] font-medium">{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