import styles from "../ToolBar.module.css"
import Button from "../../ui/button/button";
import { useState } from "react";
import Filter from "../../Filter/Filter";

interface Filters {
    alphabetical: "asc" | "desc";
    yearOrder: "asc" | "desc";
}

interface FilterBtnProps {
    setFilters: any
    filters: Filters
}

export default function FilterBtn({ setFilters, filters }: FilterBtnProps) {

    const [isFilterVisible, setIsFilterVisible] = useState(false);

    const toggleFilters = () => {
        setIsFilterVisible(prev => !prev);
    };

    return <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
        <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
            <img src="filter.svg" alt="Filtrer"/>
        </Button>
        <div className={styles.filterMenu}>
            <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
        </div>
    </div>
}