import React, { useState, useEffect } from 'react'
import { useGridLiveRegion } from '../context/grid-live-region-context'
import { LiveRegion } from '../layout'

export const GridLiveRegion = () => {
    const [mounted, setMounted] = useState(false)

    useEffect(() => {
        setMounted(true)
    }, [])

    const { announcement } = useGridLiveRegion()

    return (
        <LiveRegion aria-live="assertive">
            {mounted ? announcement : ''}
        </LiveRegion>
    )
}