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

function List() {

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

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

export default List