import React, { useState, useRef } from 'react';
import { Button } from '@strapi/design-system/Button';
import { useQueryParams, useTracking } from '@strapi/helper-plugin';
import FilterIcon from '@strapi/icons/Filter';
import { useIntl } from 'react-intl';
import FilterList from '../../../components/FilterList';
import FilterPopover from '../../../components/FilterPopover';
import displayedFilters from '../../../utils/displayedFilters';

import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Box } from '@strapi/design-system/Box';
import { Button } from '@strapi/design-system/Button';
import Filter from '@strapi/icons/Filter';
import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';

const Filters = ({ displayedFilters }) => {
  const [isVisible, setIsVisible] = useState(false);

import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { Button } from '@strapi/design-system/Button';
import FilterIcon from '@strapi/icons/Filter';
import { useIntl } from 'react-intl';
import FilterList from '../../FilterList';
import FilterPopover from '../../FilterPopover';
import displayedFilters from '../../../utils/displayedFilters';

export const Filters = ({ appliedFilters, onChangeFilters }) => {