'use client'

import {Button} from "@/components/Button";
import Bell from "@/components/svg/notifications/bell";
import {useState} from "react";

export function Notification() {
    const [notificationIsActive, setNotificationIsActive] = useState<boolean>(false);

    return (
        /* 'relative' sorgt dafür, dass das absolute Menü hier verankert bleibt */
        <div className="relative inline-block">
            <Button
                className="w-min p-2"
                onClick={() => setNotificationIsActive(!notificationIsActive)}
            >
                <Bell/>
            </Button>

    {notificationIsActive && <NotificationMenu/>}
        </div>
    );
}

function NotificationMenu() {
    return (
        /* 'absolute' nimmt das Element aus dem Fluss.
           'right-0' richtet es an der rechten Kante des Buttons aus.
           'z-50' sorgt dafür, dass es über dem Footer/Content liegt.
        */
        <div
            className="absolute right-0 w-64 bg-white border-2 border-gray-200 transition shadow-lg rounded-md p-4 z-50">
            <p className="text-sm font-semibold text-gray-700">Benachrichtigungen</p>
            <hr className="my-2"/>
            <div className="text-gray-600">Hello World</div>
        </div>
    );
}