'use client'
import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global'
import { ActionIcon, Box, } from '@mantine/core'
import { useState } from 'react'
import { HiMenu } from 'react-icons/hi'
import DrawerNotification from './drawer_notification'
import ListNotification from './list_notification'

export default function ViewNotification() {
    const [isOpen, setOpen] = useState(false)

    return (
        <Box>
            <LayoutNavbarNew
                back='/home'
                title='Notifikasi'
                menu={
                    <ActionIcon onClick={() => setOpen(true)} variant="light" bg={TEMA.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                        <HiMenu size={20} color='white' />
                    </ActionIcon>
                }
            />
            <Box p={20}>
                <ListNotification />
            </Box>

            <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
                <DrawerNotification onDone={() => setOpen(false)} />
            </LayoutDrawer>
        </Box>
    )
}
