import React, { useEffect, useState } from 'react';

export default function CommandPalette({ isOpen, onClose }) {
  const [query, setQuery] = useState('');

  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        isOpen ? onClose() : null;
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-slate-950/80 backdrop-blur-sm p-4 animate-fade-in">
      <div className="w-full max-w-xl rounded-2xl border border-[#334155] bg-[#1E293B] shadow-2xl overflow-hidden">
        <input
          autoFocus
          placeholder="Type a command or search..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="w-full bg-transparent px-5 py-4 text-sm text-slate-100 placeholder-slate-500 border-b border-[#334155] focus:outline-none"
        />
        <div className="p-4 text-xs text-slate-500 flex justify-between items-center">
          <span>Navigation Shortcuts</span>
          <span>Press ESC to exit</span>
        </div>
      </div>
    </div>
  );
}