import CalendarAdD from "@/components/icons/CalendarAdD"
import CardTickD from "@/components/icons/CardTickD"

function Cards({ user }) {
    return (
        <div className='flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]'>
            <div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
                <div className='bg-[#5559CE] rounded-full p-[7px]'>
                    <div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
                        <CardTickD />
                    </div>
                </div>
                <div className='flex flex-col gap-[8px] items-start justify-start'>
                    <p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.total_transactions} <span className='text-[11px]'>تومان</span></p>
                    <p className='text-[#616161] text-nowrap text-[12px] font-normal'>مجموع تراکنش ها</p>
                </div>
            </div>
            <div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
                <div className='bg-[#FFC051] rounded-full p-[7px]'>
                    <div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
                        <CalendarAdD />
                    </div>
                </div>
                <div className='flex flex-col gap-[8px] items-start justify-start'>
                    <p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.number_of_turns}</p>
                    <p className='text-[#616161] text-nowrap text-[12px] font-normal'>تعداد نوبت های شما</p>
                </div>
            </div>
        </div>
    )
}

export default Cards