import specialties from '@/data/specialties.json';
import ItemSpecialties from './ItemSpecialties';
import MenuS from '@/components/icons/MenuS';
import Pagination from '@/app/component/Pagination';

function List() {
    return (
        <div className='bg-[#FAFAFA]'>
            <div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
                <MenuS />
                <p className='text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] font-bold'>لیست تخصص ها</p>
            </div>
            <ul className="padding-responsive grid grid-cols-2 sm:grid-cols-3 mg:grid-cols-4 lg:grid-cols-6 gap-x-[24px] gap-y-[40px]">
                {specialties.map(speciality => (
                    <ItemSpecialties
                        data={speciality}
                        key={speciality.id}
                    />
                ))}
            </ul>
            <div className='mt-[48px] flex justify-center'>
                <Pagination />
            </div>
        </div>
    )
}

export default List;