import { frequentSearches } from "@/constans"
import { Button } from "@mui/material"

function FrequentSearches() {
    return (
        <div className="flex mt-3 items-center justify-start lg:justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
            <p className="text-[#3B3B3B] text-[16px] font-normal text-nowrap">جستجوهای پر تکرار:</p>
            <div className="overflow-auto hidden-scroll">
                <ul className="flex items-center justify-start gap-[14px]">
                    {frequentSearches.map((item, idx) => (
                        <li key={idx}>
                            <Button
                                variant="contained"
                                color="secondary"
                                className="!py-2 !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7]"
                            >{item}</Button>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    )
}

export default FrequentSearches