// components/UrlDropdown.jsx
import { useState } from "react";

const urlOptions = [
    "http://www.mysite.com",
    "http://www.myseosucks.com",
    "http://www.sribbble.com",
    "http://onekeyword.com"
];

export default function UrlDropdown() {
    const [isOpen, setIsOpen] = useState(false);
    const [selected, setSelected] = useState(urlOptions[0]);

    const toggleDropdown = () => setIsOpen((prev) => !prev);
    const handleSelect = (url: string) => {
        setSelected(url);
        setIsOpen(false);
    };

    return (
        <div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
            {/* Input box */}
            <div
                className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
                onClick={toggleDropdown}
            >
                <span className="truncate text-gray-800">{selected}</span>
                <div className="flex items-center gap-2">
                    {isOpen ? (
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 5L5 1L1 5" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    ) : (
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 1L5 5L9 1" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    )}
                </div>
            </div>

            {/* Dropdown list */}
            {isOpen && (
                <div className="absolute mt-1 bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10 w-[110%]">
                    {urlOptions.map((url, index) => (
                        <div
                            key={index}
                            onClick={() => handleSelect(url)}
                            className={`flex justify-between items-center px-3 py-2 hover:bg-gray-100 cursor-pointer ${selected === url ? "font-bold text-black" : "text-gray-700"
                                }`}
                        >
                            <span className="truncate">{url}</span>
                            {selected === url && (
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
                                    <path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>

                            )}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}