"use client";

import { hotelIcons } from "@/shared/lib/iconTranslations";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/ui/select";
import * as Icons from "lucide-react";
import { useState } from "react";

type IconSelectProps = {
  selectedIcon?: string;
  setSelectedIcon: (value: string) => void;
};

export default function IconSelect({
  selectedIcon,
  setSelectedIcon,
}: IconSelectProps) {
  const [search, setSearch] = useState("");

  const filteredIcons = hotelIcons.filter(
    (icon) =>
      icon.uz.toLowerCase().includes(search.toLowerCase()) ||
      icon.ru.toLowerCase().includes(search.toLowerCase()) ||
      icon.name.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <div className="flex flex-col gap-2">
      <Select value={selectedIcon} onValueChange={setSelectedIcon}>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="Ikona tanlang" />
        </SelectTrigger>
        <SelectContent className="max-h-64 overflow-y-auto p-2">
          <input
            type="text"
            placeholder="Qidirish..."
            className="w-full border px-2 py-1 text-sm mb-2 rounded-md outline-none"
            onChange={(e) => setSearch(e.target.value)}
          />
          {filteredIcons.map(({ name, uz, ru }) => {
            const LucideIcon = (Icons as any)[name];
            if (!LucideIcon) return null;
            return (
              <SelectItem key={name} value={name}>
                <div className="flex items-center gap-2">
                  <LucideIcon className="w-4 h-4" />
                  {uz} <span className="text-gray-400">({ru})</span>
                </div>
              </SelectItem>
            );
          })}
        </SelectContent>
      </Select>
    </div>
  );
}
