import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import { ICON_LIST } from "@/lib/icons";

interface IconPickerProps {
  value: string;
  onChange: (iconName: string) => void;
}

export default function IconPicker({ value, onChange }: IconPickerProps) {
  const [search, setSearch] = useState("");
  const filteredIcons = ICON_LIST.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()));
  return (
    <div>
      <input
        type="text"
        placeholder="Search icons..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="mb-2 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/60"
      />
      <div className="grid max-h-48 grid-cols-6 gap-2 overflow-y-auto">
        {filteredIcons.map((i) => (
          <button
            key={i.name}
            className={`rounded-lg border p-2 transition-colors ${
              value === i.name
                ? "border-indigo-500 bg-indigo-500/10 text-indigo-300"
                : "border-slate-800 bg-slate-900 text-slate-300 hover:border-slate-700 hover:bg-slate-800"
            }`}
            onClick={() => onChange(i.name)}
            type="button"
          >
            <FontAwesomeIcon icon={i.icon} size="lg" />
          </button>
        ))}
      </div>
    </div>
  );
}
