'use client';

import turns from '@/data/turns.json';
import { Button } from '@mui/material';
import ItemAppointment from './ItemAppointment';
import ArrowLeftD from '@/components/icons/ArrowLeftD';
import Link from 'next/link';

function AppointmentList({ doctor, loading }) {

    const itemActive = turns[0];

    return (
        <>
            <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
                {[turns[0]].map(item => (
                    <ItemAppointment
                        turn={item}
                        key={item.id}
                        doctor={doctor}
                        loading={loading}
                    />
                ))}
            </ul>
            <div className='fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] 
            border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between'>
                <p className='text-[#05BA58] text-[11px] font-normal'>اولین نوبت آزاد: {itemActive.first_free_turn}</p>
                <Link
                    href={`/booking/${itemActive.id}`}
                >
                    <Button
                        variant='contained'
                        className='!py-2 !px-4 gap-1 !text-[14px] !font-medium'
                    >
                        دریافت نوبت
                        <div className='w-[20px] h-[20px]'>
                            <ArrowLeftD />
                        </div>
                    </Button>
                </Link>
            </div>
        </>
    )
}

export default AppointmentList