/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import Badge from "components/Badge";
import { IProduct } from "./IProdutct";
import classNames from "classnames";
import { useTranslation } from "react-i18next";

/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */
type Props = {
  hints?: IProduct[];
  delFilter: (element: IProduct) => void;
  clearAll: () => void;
  className?: string;
};
/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */
export default function AppiledFilters({
  hints,
  delFilter,
  clearAll,
  className,
}: Props) {

  const [t, i18next] = useTranslation()

  return (
    <>
      <div
        className={classNames(
          "w-full py-3 h-36 max-h-36 overflow-hidden ",
          className
        )}
      >
        <div className="flex flex-row items-center justify-between space-x-3 ">
          <div className="font-medium">{t("filters.appliedFitlers")}</div>
          <div>
            <button
              onClick={clearAll}
              className="font-normal text-sm text-gray-400"
            >
              {t("filters.clearAll")}
            </button>
          </div>
        </div>
        <ul className="list-none mt-2 h-24 max-h-32 overflow-auto">
          {hints &&
            hints.length > 0 &&
            hints.map((item: IProduct) => (
              <li className="mt-1" key={item.id}>
                <Badge
                  className="py-1 cursor-default"
                  emphasis="high"
                  closeOption={true}
                  onClick={() => delFilter(item)}
                >
                  {item.brand}
                </Badge>
              </li>
            ))}
        </ul>
      </div>
    </>
  );
}
