"use client";

import { useEffect, useState } from "react";
import { Search } from "lucide-react";
import SearchModal from "./SearchModal";

export default function SearchTrigger() {
  const [open, setOpen] = useState(false);

  // 隐藏快捷键 Cmd+K / Ctrl+K（不在 UI 暴露，但保留方便用）
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((v) => !v);
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="搜索艺人"
        title="搜索艺人"
        className="w-9 h-9 rounded-md flex items-center justify-center text-white/65 hover:text-white hover:bg-white/[0.06] transition-colors"
      >
        <Search size={16} />
      </button>

      <SearchModal open={open} onClose={() => setOpen(false)} />
    </>
  );
}
