'use client'

import { useEffect, useState } from 'react'

export default function ProfileDropdown() {
    const [open, setOpen] = useState(false)
    const [profile, setProfile] = useState<{ user?: string; email?: string }>({})

    useEffect(() => {
        fetch('/api/me')
            .then((res) => res.json())
            .then((data) => setProfile(data))
            .catch(() => setProfile({}))
    }, [])

    const handleLogout = async () => {
        window.location.href = '/logout'
    }

    const name = profile.email || profile.user || 'Loading...'

    return (
        <div className="relative">
            <button
                onClick={() => setOpen(!open)}
                className="text-white font-medium px-4 py-2 hover:bg-zinc-800 rounded"
            >
                Profil ▾
            </button>

            {open && (
                <div className="absolute right-0 mt-2 w-56 bg-white shadow-lg rounded z-50 text-zinc-900 overflow-hidden text-sm">
                    <div className="px-4 py-2 border-b border-zinc-200 font-medium">
                        {name}
                    </div>
                    <button
                        onClick={handleLogout}
                        className="block w-full text-left px-4 py-2 hover:bg-zinc-100"
                    >
                        Logout
                    </button>
                </div>
            )}
        </div>
    )
}