<template>
  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
    <v-card-title class="d-flex align-center py-4 px-4">
      <div class="d-flex align-center">
        <v-icon class="mr-2" color="primary" :icon="mdiChartTimelineVariant"></v-icon>
        <span>{{ title }}</span>
      </div>
      <v-spacer></v-spacer>
      <div class="d-flex">
        <v-btn
          v-for="filter in filters"
          :key="filter"
          :color="activeFilter === filter ? 'primary' : 'grey'"
          density="compact"
          variant="text"
          @click="$emit('filter-change', filter)"
        >
          {{ filter }}
        </v-btn>
      </div>
    </v-card-title>

    <v-card-text class="pt-6 pb-2">
      <div class="chart-container" style="height: 300px; position: relative">
        <v-sparkline
          auto-draw
          fill
          :gradient="['#1890ff', '#e6f7ff']"
          gradient-direction="top"
          height="100"
          :line-width="2"
          :model-value="data"
          :padding="8"
          :smooth="10"
          stroke-linecap="round"
        >
          <template #label="item">
            {{ item.value }}
          </template>
        </v-sparkline>
        <slot name="x-axis">
          <div class="d-flex justify-space-between mt-2 px-2 text-caption text-grey">
            <span v-for="i in 12" :key="i">{{ 6 + i }}:00</span>
          </div>
        </slot>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { mdiChartTimelineVariant } from '@mdi/js'
interface Props {
  title: string
  data: number[]
  filters: string[]
  activeFilter: string
}

defineProps<Props>()

defineEmits(['filter-change'])
</script>

<style scoped>
.chart-container {
  overflow: hidden;
}
</style>
