"use client";

import { useFilter } from "@/lib/filter-zustand";
import { X } from "lucide-react";

export default function FilterInfo() {
  const filtered = useFilter((state) => state.filter);
  const resetFilter = useFilter((state) => state.resetFilter);
  const togleFilter = useFilter((state) => state.toggleFilter);
  if (filtered.length === 0) {
    return null;
  }
  return (
    <div className="fixed bottom-13 left-5 z-10 bg-gray-500 p-3 rounded-lg space-y-3 max-w-70 w-full">
      <p className="text-white ">Found: 20</p>
      <div className="flex gap-1 flex-wrap">
        {filtered &&
          filtered.map((item) => (
            <div
              key={item.id}
              className="flex items-center gap-1 p-1 rounded-lg bg-gray-700 text-white text-sm "
            >
              <button onClick={() => togleFilter(item)}>
                <X size={16} />
              </button>
              {item.name}
            </div>
          ))}
      </div>
      <button onClick={resetFilter} className="text-white underline ">
        Clear all
      </button>
    </div>
  );
}
