import CircularLoading from "@/app/component/loading/Circular"
import TextLoading from "@/app/component/loading/Text"
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
import { Button } from "@mui/material"
import Image from "next/image"

function Card({ data, loading, setIsTurnsDetails }) {
    return (
        <li
            className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
        >
            <div className="flex items-center justify-start gap-[8px] p-[12px]">
                <CircularLoading width={32} height={32} loading={loading}>
                    <Image
                        width={32}
                        height={32}
                        alt="profile"
                        src={data.image}
                    />
                </CircularLoading>
                <div className="flex flex-col items-start justify-center gap-[8px]">
                    <TextLoading loading={loading} width={65} height={18}>
                        <p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
                    </TextLoading>
                    <TextLoading loading={loading} width={50} height={18}>
                        <p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
                    </TextLoading>
                </div>
            </div>
            <ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
                <li className="flex items-center justify-between">
                    <TextLoading loading={loading} width={75} height={18}>
                        <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
                    </TextLoading>
                    <TextLoading loading={loading} width={110} height={18}>
                        <p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
                    </TextLoading>
                </li>
                <li className="flex items-center justify-between">
                    <TextLoading loading={loading} width={65} height={18}>
                        <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
                    </TextLoading>
                    <TextLoading loading={loading} width={60} height={18}>
                        <p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
                    </TextLoading>
                </li>
            </ul>
            <div className="mt-[12px] flex items-center justify-between px-[12px]">
                <TextLoading loading={loading} width={120} height={18}>
                    <p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
                </TextLoading>
                <TextLoading loading={loading} width={80} height={25}>
                    <Button
                        className="!flex !p-1 !items-center !justify-end !gap-[2px]"
                        onClick={() => setIsTurnsDetails(true)}
                        variant="text"
                    >
                        مشاهده
                        <ArrowLeftCardD />
                    </Button>
                </TextLoading>
            </div>
        </li>
    )
}

export default Card