"use client";
import React from "react";

const SearchOverlay = () => {
    const closeSearch = () => {
        const searchArea = document.querySelector(".df-search-area");
        const bodyOverlay = document.querySelector(".body-overlay");
        searchArea?.classList.remove("opened");
        bodyOverlay?.classList.remove("opened");
    };

    return (
        <>
            <div className="df-search-area">
                <div className="container">
                    <div className="row">
                        <div className="col-xl-12">
                            <div className="df-search-form">
                                <div className="df-search-close text-center mb-20">
                                    <button
                                        className="df-search-close-btn"
                                        onClick={closeSearch}
                                    ></button>
                                </div>
                                <form action="#">
                                    <div className="df-search-input mb-10">
                                        <input
                                            type="text"
                                            placeholder="Search here..."
                                            suppressHydrationWarning={true}
                                        />
                                        <button type="submit" suppressHydrationWarning={true}>
                                            <i className="fa-solid fa-magnifying-glass"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="body-overlay" onClick={closeSearch}></div>
        </>
    );
};

export default SearchOverlay;