---
// Tabs/content blocks are HTML strings (different order when `bottom`).
interface Props {
  id?: string
  bottom?: boolean
}

const { id = 'top', bottom } = Astro.props

const tabs = ['Activity', 'Profile', 'Settings']

const tabsHtml = `
<!-- Cards navigation -->
<ul class="nav nav-tabs${bottom ? ' nav-tabs-bottom' : ''}" role="tablist">
${tabs.map((tab, i) => `   <li class="nav-item" role="presentation"><a href="#tab-${id}-${i + 1}" id="tab-${id}-${i + 1}-tab" class="nav-link${i === 0 ? ' active' : ''}" data-bs-toggle="tab" data-bs-target="#tab-${id}-${i + 1}" role="tab" aria-controls="tab-${id}-${i + 1}" aria-selected="${i === 0 ? 'true' : 'false'}">${tab}</a></li>`).join('\n')}
</ul>`

const tabsContentHtml = `
<div class="tab-content">
${tabs
  .map(
    (tab, i) => `   <!-- Content of card #${tab} -->
   <div id="tab-${id}-${i + 1}" class="card tab-pane${i === 0 ? ' active show' : ''}" role="tabpanel" aria-labelledby="tab-${id}-${i + 1}-tab">
      <div class="card-body">
         <h2 class="card-title">${tab}</h2>
         <p class="text-secondary">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
      </div>
   </div>`,
  )
  .join('\n')}
</div>`
---

<!-- Cards with tabs component -->
<div class="card-tabs">
  {
    bottom ? (
      <Fragment>
        <Fragment set:html={tabsContentHtml} />
        <Fragment set:html={tabsHtml} />
      </Fragment>
    ) : (
      <Fragment>
        <Fragment set:html={tabsHtml} />
        <Fragment set:html={tabsContentHtml} />
      </Fragment>
    )
  }
</div>