<!-- src/components/Tabs/Tab.vue -->
<template>
  <div class="tab-content" v-show="value === selectedTitle">
    <slot></slot>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'Tab',
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const selectedTitle = inject('selectedTitle')
    return {
      selectedTitle
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-content {
  padding: 1rem;
  border: 1px solid #dbdbdb;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
</style>

<!-- src/components/Tabs/Tabs.vue -->
<template>
  <div class="tabs-container">
    <div class="tabs">
      <ul>
        <li 
          v-for="tab in tabs" 
          :key="tab.value"
          :class="{ 'is-active': tab.value === selectedTitle }"
          @click="selectTab(tab.value)"
        >
          <a>{{ tab.title }}</a>
        </li>
      </ul>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { ref, provide, onMounted } from 'vue'

export default {
  name: 'Tabs',
  props: {
    initialTab: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const selectedTitle = ref(props.initialTab)
    const tabs = ref([])

    provide('selectedTitle', selectedTitle)

    const selectTab = (value) => {
      selectedTitle.value = value
    }

    onMounted(() => {
      // Get all tab components
      const tabComponents = document.querySelectorAll('.tab-content')
      tabs.value = Array.from(tabComponents).map(tab => ({
        title: tab.getAttribute('data-title'),
        value: tab.getAttribute('data-value')
      }))

      // Set initial tab if not provided
      if (!selectedTitle.value && tabs.value.length > 0) {
        selectedTitle.value = tabs.value[0].value
      }
    })

    return {
      selectedTitle,
      tabs,
      selectTab
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-container {
  margin: 1rem 0;
}

.tabs {
  ul {
    border-bottom-color: #dbdbdb;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  li {
    margin-bottom: -1px;
    
    &.is-active a {
      border-bottom-color: #485fc7;
      color: #485fc7;
    }

    a {
      border-bottom: 1px solid #dbdbdb;
      margin-bottom: -1px;
      padding: 0.5em 1em;
      cursor: pointer;
      
      &:hover {
        border-bottom-color: #485fc7;
        color: #485fc7;
      }
    }
  }
}
</style>

<!-- src/components/examples/TabExample.vue -->
<template>
  <Tabs>
    <Tab title="First Tab" value="tab1">
      <h2>First Tab Content</h2>
      <p>This is the content of the first tab.</p>
    </Tab>
    
    <Tab title="Second Tab" value="tab2">
      <h2>Second Tab Content</h2>
      <p>This is the content of the second tab.</p>
    </Tab>
    
    <Tab title="Third Tab" value="tab3">
      <h2>Third Tab Content</h2>
      <p>This is the content of the third tab.</p>
    </Tab>
  </Tabs>
</template>

<script>
import Tabs from '../Tabs/Tabs.vue'
import Tab from '../Tabs/Tab.vue'

export default {
  name: 'TabExample',
  components: {
    Tabs,
    Tab
  }
}
</script>

<Tabs initial-tab="tab2">
  <Tab title="First Tab" value="tab1">
    Content 1
  </Tab>
  <Tab title="Second Tab" value="tab2">
    Content 2
  </Tab>
</Tabs>