<script setup>
import { computed } from 'vue';
import { provideChartContext } from './interface';

const props = defineProps({
  config: { type: Object, required: false, default: () => ({}) },
  class: { type: [String, Array, Object], required: false },
  cursor: { type: Boolean, default: true },
  id: { type: String, required: false },
});

// Provide context (even if empty) so descendants can attempt to read series config.
const ctx = provideChartContext(props.config, props.id);
const chartDomId = computed(() => `chart-${ctx.id}`);
</script>

<template>
  <div
    data-chart-container
    :data-chart="chartDomId"
    :class="['relative w-full flex flex-col', props.class]"
    :style="{
      // Default color variables; series components can override via inline style or CSS theme logic.
      '--vis-primary-color': 'hsl(var(--primary))',
      '--vis-secondary-color': 'hsl(var(--secondary))',
      '--vis-crosshair-line-stroke-width': props.cursor ? '1px' : '0px',
      '--vis-font-family': 'var(--font-sans)',
    }"
  >
    <slot />
  </div>
</template>
