<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark">Dark</span>

<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" :style="{ width: '25%' }">25%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-secondary" role="progressbar" :style="{ width: '50%' }">50%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" :style="{ width: '75%' }">75%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" :style="{ width: '100%' }">100%</div>
</div>

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

<button
  class="btn btn-primary example-popover mb-0 me-0"
  type="button"
  v-popover
  data-bs-placement="left"
  title="Popover Title"
  data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
  Click to toggle popover
</button>
<button
  class="example-popover btn btn-success mb-0 me-0"
  type="button"
  v-popover
  data-bs-trigger="hover"
  data-container="body"
  data-bs-placement="bottom"
  title="Hover Popover"
  data-offset="-20px -20px"
  data-bs-content=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building."
>
  On Hover Tooltip
</button>

<button class="mb-0 me-0 btn btn-primary" v-tooltip :title="'Primary'">Primary</button>
<button class="mb-0 me-0 btn btn-secondary" v-tooltip :title="'Secondary'">Secondary</button>
<button class="mb-0 me-0 btn btn-warning" v-tooltip :title="'Warning'">Warning</button>
<button class="mb-0 me-0 btn btn-success" v-tooltip :title="'Success'">Success</button>
<button class="mb-0 me-0 btn btn-danger" v-tooltip :title="'Danger'">Danger</button>
<button class="mb-0 me-0 btn btn-info" v-tooltip :title="'info'">Info</button>

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown Title</button>
    <ul class="dropdown-menu dropdown-block">
      <li>
          <a class="dropdown-item" href="javascript:void(0)">Action</a>
      </li>
        <li>
          <a class="dropdown-item" href="javascript:void(0)">Another Action</a>
      </li>
      <li>
          <a class="dropdown-item" href="javascript:void(0)">Something Else Here</a>
      </li>
    </ul>
</div>

<div class="accordion dark-accordion" id="simple-accordion">

  <!-- Accordion Item #1 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading-1">
      <button @click="toggleAccordion(1)"
        class="accordion-button accordion-light-primary txt-primary"
        :class="{ collapsed: !visibleAccordion.includes(1) }"
        type="button">
        Accordion Item #1
        <FeatherIcon :type="'chevron-down'" :class="'svg-color'" />
      </button>
    </h2>
    <div class="accordion-collapse collapse"
      :class="{ show: visibleAccordion.includes(1) }">
      <div class="accordion-body">
        This is the <b>first item's </b>accordion body. It is shown by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control
        the overall appearance, as well as the showing and hiding via CSS transitions. You can
        modify any of this with custom CSS or overriding our default variables. It's also worth
        noting that just about any HTML can go within the <b>.accordion-body </b>, though the
        transition does limit overflow.
      </div>
    </div>
  </div>

  <!-- Accordion Item #2 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading-2">
      <button @click="toggleAccordion(2)"
        class="accordion-button accordion-light-primary txt-primary"
        :class="{ collapsed: !visibleAccordion.includes(2) }"
        type="button">
        Accordion Item #2
        <FeatherIcon :type="'chevron-down'" :class="'svg-color'" />
      </button>
    </h2>
    <div class="accordion-collapse collapse"
      :class="{ show: visibleAccordion.includes(2) }">
      <div class="accordion-body">
        This is the <b>second item's </b>accordion body. It is hidden by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control
        the overall appearance, as well as the showing and hiding via CSS transitions. You can
        modify any of this with custom CSS or overriding our default variables. It's also worth
        noting that just about any HTML can go within the <b>.accordion-body </b>, though the
        transition does limit overflow.
      </div>
    </div>
  </div>

  <!-- Accordion Item #3 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading-3">
      <button @click="toggleAccordion(3)"
        class="accordion-button accordion-light-primary txt-primary"
        :class="{ collapsed: !visibleAccordion.includes(3) }"
        type="button">
        Accordion Item #3
        <FeatherIcon :type="'chevron-down'" :class="'svg-color'" />
      </button>
    </h2>
    <div class="accordion-collapse collapse"
      :class="{ show: visibleAccordion.includes(3) }">
      <div class="accordion-body">
        <p>This is the <b>third item's </b>accordion body. It is hidden by default, until the collapse
        plugin adds the appropriate classes that we use to style each element. These classes control
        the overall appearance, as well as the showing and hiding via CSS transitions. You can
        modify any of this with custom CSS or overriding our default variables. It's also worth
        noting that just about any HTML can go within the <b>.accordion-body </b>, though the
        transition does limit overflow.</p>
      </div>
    </div>
  </div>

</div>

<template>
    <ul class="simple-wrapper nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" v-for="tab in simpleTab" :key="tab.id">
        <a class="nav-link txt-primary" :class="{ active: activeTab === tab.value }" href="javascript:void(0)" @click="handleTab(tab.value)">{{ tab.title }}</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active">
        <template v-if="activeTab === 'home'">
          <p class="pt-3">
            This is some placeholder content the <b>Home tab's </b>associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
            control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation. Bootstrap provides a flexible and easy-to-use tab component that allows
            developers to create tabbed navigation effortlessly.
          </p>
        </template>
        <template v-else-if="activeTab === 'profile'">
          <div class="pt-3 mb-0">
            <div class="flex-space flex-wrap align-items-center">
              <img class="tab-img" :src="getImage('avatar/3.jpg')" alt="profile" />
              <ul class="d-flex flex-column gap-1">
                <li><strong>Visit Us:</strong> 2600 Hollywood Blvd,Florida, United States-33020</li>
                <li><strong>Mail Us:</strong> contact@us@gmail.com</li>
                <li><strong>Contact Number: </strong> (954) 357-7760</li>
              </ul>
            </div>
          </div>
        </template>
        <template v-else-if="activeTab === 'contact'">
          <ul class="pt-3 d-flex flex-column gap-1">
            <li>Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.</li>
            <li><strong>Visit Us: </strong> 2600 Hollywood Blvd,Florida, United States- 33020</li>
            <li><strong>Mail Us:</strong> contact@us@gmail.com</li>
            <li><strong>Contact Number: </strong> (954) 357-7760</li>
          </ul>
        </template>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { simpleTab } from '@/core/data/uiKits/tabs';
import { baseUtils } from '@/utils';

const { getImage } = baseUtils();

let activeTab = ref<string>('profile');

function handleTab(value: string) {
  activeTab.value = value;
}
</script>

<style scoped></style>

export interface Tabs {
  id: number;
  title: string;
  value: string;
  icon?: string;
  tag?: string | number;
}
export const simpleTab: Tabs[] = [
  {
    id: 1,
    title: 'Home',
    value: 'home',
  },
  {
    id: 2,
    title: 'Profile',
    value: 'profile',
  },
  {
    id: 3,
    title: 'Contact',
    value: 'contact',
  },
];