import React, { useState } from "react";
import { Search } from "lucide-react";
import {
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogClose,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { router } from "@inertiajs/react";

const SearchDialog: React.FC = () => {
    const [searchQuery, setSearchQuery] = useState("");

    const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (searchQuery.trim()) {
            router.visit(`/search?q=${encodeURIComponent(searchQuery)}`, {
                preserveState: true,
                preserveScroll: true,
            });
            setSearchQuery(""); // Clear input setelah search
        }
    };

    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button
                    variant="ghost"
                    className="bg-green-800/90 hover:bg-green-700 text-white p-2 rounded-full"
                >
                    <Search className="h-6 w-6" />
                </Button>
            </DialogTrigger>
            <DialogContent className="bg-white text-black p-6 rounded-lg w-[90%] max-w-md">
                <DialogHeader>
                    <DialogTitle className="text-lg font-bold text-center">
                        Search
                    </DialogTitle>
                </DialogHeader>
                <form
                    onSubmit={handleSearch}
                    className="flex items-center gap-2 w-full"
                >
                    <input
                        type="text"
                        placeholder="Search..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="bg-gray-100 px-3 py-2 rounded-lg focus:outline-none w-full"
                    />
                    <Button
                        type="submit"
                        className="bg-green-700 hover:bg-green-600 text-white p-2 rounded-lg"
                    >
                        <Search className="h-5 w-5" />
                    </Button>
                </form>
                {/* <DialogClose asChild>
                    <Button
                        variant="ghost"
                        className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
                    >
                        ✕
                    </Button>
                </DialogClose> */}
            </DialogContent>
        </Dialog>
    );
};

export default SearchDialog;