<Flexbox flexDirection="column" :if={state.showTimer} p={20} alignItems="center">
    <Text :if={data.title} mb={16} fontWeight="Bold" fontSize="2xl" content={data.title} />
    <Flexbox gap={10} alignContent="center" alignItems="center" flexDirection="row">
        <Fragment :forEach={state.timeComponents} :as="timeComponent">
            <Box style={{aspectRatio: 1, alignItems: 'center', justifyContent: 'center'}} borderWidth={1} borderColor="primary-200" minWidth={70} borderRadius={5} bg="gray-50" px="2xs" py="2xs" >
                <Text fontWeight="bold" textAlign="center" >{timeComponent.value}</Text>
                <Text mt="6xs" color="gray-600" fontSize="sm" textAlign="center" >{timeComponent.unit}</Text>
            </Box>
        </Fragment>
        
    </Flexbox>
</Flexbox>


<Script :dependencies={[data.date]}>
    const endDate = new Date(data.date);
    const updateTime = () => {
        // Calculate the difference in milliseconds
        const now = new Date();
        const difference = endDate - now;
        if (difference >= 0) {
            // Time calculations for days, hours, minutes, and seconds
            const days = { value: Math.floor((difference / (1000 * 60 * 60 * 24))), unit: 'day.' };
            const hours = { value: Math.floor((difference / (1000 * 60 * 60)) % 24), unit: 'hr.' };
            const minutes = { value: Math.floor((difference / 1000 / 60) % 60), unit: 'min.' };
            const seconds = { value: Math.floor((difference / 1000) % 60), unit: 'sec.' };
            // Assuming setState is a function to update your state
            setStates({
                timeComponents: [days, hours, minutes, seconds],
                showTimer: true,
            });
        }
        else {
            // Clear the interval if the end date is past
            setState('showTimer', false)
            clearInterval(intervalId); 
        }
    };
    // Call updateTime every second
    const intervalId = setInterval(updateTime, 1000);
    // Call it once immediately to set the initial state
    updateTime();

    onCleanup(() => clearInterval(intervalId))
</Script>

{
  "title": "Starts in",
  "date": "2030-12-31T23:59:59"
}