<script lang="ts" setup>
import { computed } from 'vue'
import ServiceTabLayout from '@/Components/Panel/ServiceTabLayout.vue'
import BandwidthChart from '@/Components/Panel/BandwidthChart.vue'
import type { Service } from '@/types'

interface BandwidthEntry {
  date: string
  in: number
  out: number
}

interface Props {
  service: Service
  bandwidthData: BandwidthEntry[]
}

const props = defineProps<Props>()

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/dedicated-panel` },
  { label: 'Console', icon: 'tabler-terminal-2', to: `/services/${props.service.id}/dedicated-panel/console` },
  { label: 'Bandwidth', icon: 'tabler-chart-area-line', to: `/services/${props.service.id}/dedicated-panel/bandwidth` },
  { label: 'Network', icon: 'tabler-network', to: `/services/${props.service.id}/dedicated-panel/network` },
  { label: 'Reinstall', icon: 'tabler-reload', to: `/services/${props.service.id}/dedicated-panel/reinstall` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/dedicated-panel/settings` },
])
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/dedicated-panel/bandwidth`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-chart-area-line" color="primary" />
        Bandwidth Usage
      </VCardTitle>
      <VCardText>
        <BandwidthChart :data="bandwidthData" period="30d" />
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
