import React from "react";
import PropTypes from "prop-types";
import { FilterHeaderContainer, Title } from "./FilterHeader.styled";
import { useTranslation } from "react-i18next";
import Link from "../../../Link/Link";

const FilterHeader = (props) => {
  const filters = props.filters;
  const { t } = useTranslation();
  const clearFilters = () => {
    filters.clear();
  };
  return (
    <FilterHeaderContainer>
      <Title>{t("filters.title")}</Title>
      <Link to="#" textsize={"12px"} font={"Open Sans"} onClick={clearFilters}>
        {t("filters.cancel")}
      </Link>
    </FilterHeaderContainer>
  );
};

FilterHeader.propTypes = {
  children: PropTypes.node,
  filters: PropTypes.any,
};

export default FilterHeader;
