<template>
  <div
    v-show="isActive"
    role="tabpanel"
    :id="'panel-' + id"
    :aria-labelledby="ariaLabelledBy"
    class="tab-content"
    tabindex="0"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';
import type { TabId, TabsContext } from './types';
import { TabsProviderKey } from './types';

const props = defineProps<{
  id: TabId;
}>();

defineOptions({
  name: 'VTabPanel',
});

const tabsContext = inject<TabsContext>(TabsProviderKey);

if (!tabsContext) {
  throw new Error('VTabPanel must be used within a VTabs component.');
}

const { activeTabId } = tabsContext;

const isActive = computed(() => activeTabId.value === props.id);
const ariaLabelledBy = computed(() => `tab-${props.id}`);

</script>

<style lang="scss" scoped>
.tab-content {
  padding: 1.25rem; // Example padding, adjust as needed
  // border: 1px solid #dee2e6; // If panels container doesn't have a border
  // border-top: none;
  background-color: #fff; // Ensure background for content

  &:focus-visible { // For when panel itself is focused (e.g. after tab selection)
    outline: 2px solid #007bff;
    outline-offset: 2px;
     // box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.35);
  }

  // Add styling for content within the panel if common patterns emerge
}
</style>
