// src/components/storage/SearchCategoryBar.jsx
import React from "react";
import { LuSearch } from "react-icons/lu";
import { IoFileTray } from "react-icons/io5";
import { CATEGORY_ICON_MAP, SEARCH_TYPES } from "../../utils/storage";

export default function SearchCategoryBar({
  searchTerm,
  onSearchTermChange,
  selectedType,
  onSelectedTypeChange,
}) {
  return (
    <div className="flex group justify-center w-full mb-4 py-4 md:p-8">
      <div
        className={`
          w-full md:w-3/4 rounded-2xl md:py-4 md:px-8
          bg-transparent transition-colors duration-300
          dark:group-focus-within:bg-[#001F3F]
          group-focus-within:bg-[#f2f2f2]
        `}
      >
        <div className="w-full rounded-2xl bg-[#A1E3F980] dark:bg-[#A1E3F910] flex items-center transition-all duration-300 shadow">
          <LuSearch className="dark:text-white text-black h-7 w-7 mr-4" />
          <input
            className="h-14 w-full outline-0 ring-0 border-0 dark:text-white text-black px-4 bg-transparent font-medium placeholder:text-black/50 dark:placeholder:text-white/50"
            placeholder="جستجو..."
            type="text"
            value={searchTerm}
            onChange={(e) => onSearchTermChange?.(e.target.value)}
          />
        </div>

        <ul
          className={`
            grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 pt-4
            max-h-0 opacity-0 scale-95 overflow-hidden pointer-events-none
            transition-all duration-300 ease-out
            group-focus-within:opacity-100
            group-focus-within:scale-100
            group-focus-within:max-h-60
            group-focus-within:pointer-events-auto
          `}
        >
          {SEARCH_TYPES.map((label) => {
            const isActive = selectedType === label;
            const Icon = CATEGORY_ICON_MAP[label] || IoFileTray;

            return (
              <li key={label} className="h-10">
                <button
                  type="button"
                  onClick={() => onSelectedTypeChange?.(isActive ? null : label)}
                  className={`
                    w-full h-full dark:text-white text-black text-sm font-medium px-3
                    flex gap-2 items-center justify-center rounded-xl transition-colors duration-200
                    ${isActive ? "dark:bg-[#A1E3F919] bg-[#A1E3F980]" : "dark:hover:bg-[#A1E3F919] hover:bg-[#A1E3F980]"}
                  `}
                >
                  <Icon className="w-5 h-5 dark:text-white text-[#43BEFF]" />
                  <span className="truncate">{label}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
