<script setup lang="ts">
import { computed, provide } from 'vue'
import { useNow } from '@/composables/ticker'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'

const props = defineProps<{
    width: number
    height: number
    // min_t?: number
    // max_t?: number
}>();

const svg_viewbox = computed(() => {
    return `0 0 ${props.width} ${props.height}`;
})
const now = useNow(33);
const window_duration = 30 * 1000; // 30 seconds

const min_x = computed(() => now.value - window_duration);

provide<GraphData>(GRAPH_DATA, {
    min_x: min_x,
    max_x: now,
    width: () => props.width,
    height: () => props.height,
});

</script>

<template>
    <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
        <slot></slot>
    </svg>
</template>

<style scoped lang="scss">
svg {
    border: white 1px solid;
}
</style>