import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
import React, {useState} from 'react'
import {router, useLocalSearchParams} from "expo-router";
import {categories} from "@/constants/data";

const Filters = () => {
    const params  = useLocalSearchParams<{filter?: string}>();
    const [selectedCategory, setSelectedCategory] = useState(params.filter || 'All');

    const handleCategoryChange = (category: string) => {
        // setSelectedCategory(category);
        // router.setParams({ filter: category });
        if(selectedCategory === category) {
            setSelectedCategory('All');
            router.setParams({ filter: "All" });
            return;
        }
        setSelectedCategory(category);
        router.setParams({ filter: category });
        console.log(category)
    }
    return (
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} className={'mt-3 mb-2'}>
            {categories.map((item, index) => {
                return (
                    <TouchableOpacity onPress={() => handleCategoryChange(item.category)} className={`flex flex-col items-start mr-4 px-4 py-2 rounded-full ${selectedCategory === item.category ? 'bg-blue-300' : 'border border-blue-200'}`}>
                        <Text>{item.title}</Text>
                        {/*mozam da gi napravam ikonki ili slikicki*/}
                    </TouchableOpacity>
                )
            })}
        </ScrollView>
    )
}
export default Filters