"use client";
import { ReactNode } from "react";
import style from "./Filterable.module.css";
import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
import { useFilterStore } from "@core/Store/Filter.Store";

interface FilterableProps {
    children?: ReactNode;
}

export default function Filterable(props: FilterableProps): React.ReactElement {
    const filter = useFilterStore();

    return (
        <>
            {props.children}
            <div
                className={style.buttonFilter}
                onClick={() => {
                    filter.toggle();
                }}
            >
                <FilterAltOutlinedIcon sx={{ fontSize: "32px" }} />
            </div>
        </>
    );
}
