'use client';

import { useState } from "react";
import SearchBar from "./search";
import SortList from "./sortlist";
import ListDoctors from "./listDoctors";

import LocationD from "../icons/LocationD";

function DoctorsPage() {

    const [data, setData] = useState({
        expertise: '',
        gender: 0,
        degree: 0,
        turn: true
    });

    return (
        <div className="pt-[120px] padding-responsive">
            <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
                <div className="flex items-center justify-start gap-2 w-full">
                    <LocationD />
                    <p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>
                </div>
                <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
                    <SearchBar data={data} setData={setData} />
                    <SortList data={data} setData={setData} />
                </div>
            </div>
            <ListDoctors />
        </div>
    )
}

export default DoctorsPage