import Pageguide from "@/app/component/Pageguide"
import clinics from '@/data/clinics.json';
import ItemClinic from "./ItemClinic";
import Pagination from "@/app/component/Pagination";

function List({ loading }) {

    const listPage = ['کلینیک ها', 'اهواز'];

    return (
        <div className="padding-responsive pt-[20px]">
            <Pageguide
                list={listPage}
            />
            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6">
                {clinics.map(item => (
                    <ItemClinic
                        data={item}
                        key={item.id}
                        loading={loading}
                    />
                ))}
            </ul>
            <div className='mt-[48px] flex justify-center'>
                <Pagination />
            </div>
        </div>
    )
}

export default List