import { useState, useEffect } from 'react';
import SearchBar from './SearchBar';

export default function SearchModal() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const handleOpenSearch = () => setShow(true);
    document.addEventListener('open-search-modal', handleOpenSearch);
    return () => document.removeEventListener('open-search-modal', handleOpenSearch);
  }, []);

  if (!show) return null;

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 p-4"
      onClick={() => setShow(false)}
    >
      <div
        className="relative w-full max-w-2xl rounded-2xl border border-[var(--border)] bg-[var(--bg-card)] p-6 sm:p-8 shadow-2xl animate-fade-in"
        onClick={e => e.stopPropagation()}
      >
        <button
          data-modal-close
          onClick={() => setShow(false)}
          className="absolute right-4 top-4 text-[var(--text-muted)] hover:text-[var(--text)] transition-colors"
          aria-label="Sluit zoeken"
        >
          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <SearchBar large={true} />
      </div>
    </div>
  );
}