import React, { useState, useRef, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const SearchBar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const searchRef = useRef(null);
  const location = useLocation();

  const handleClickOutside = (event) => {
    if (
      searchRef.current &&
      !searchRef.current.contains(event.target)
    ) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    // Close dropdown on route change
    setIsOpen(false);
  }, [location]);

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div ref={searchRef} data-testid="search-div" className="search-container">
      <input
        data-testid="search-input"
        onFocus={() => setIsOpen(true)}
        placeholder="Search apartments..."
      />
      {isOpen && (
        <div className="dropdown" data-testid="auth-dropdown-btn">
          {/* Search results go here */}
        </div>
      )}
    </div>
  );
};

export default SearchBar;