---
import TabTitle from './TabTitle.astro';
import type { Props } from './tabs';
import './tabs-styles.css';

const {
   tabTitles,
   keys,
   classes = '',
   tabsNavClass = '',
   panelsContainerClass = '',
   panelClass = '',
   tabTitleClasses = ''
}: Props = Astro.props;
---

<div class:list={[`tabs-container tabs ${classes}`]}>
   <nav class:list={['tabs-nav', tabsNavClass]} role="tablist">
      {
         tabTitles.map((tabTitle: string, index: number) => (
            <TabTitle
               {tabTitleClasses}
               {tabTitle}
               {index}
               firstChecked={index === 0}
            />
         ))
      }
   </nav>

   <div class:list={['panels-container', panelsContainerClass]}>
      {
         keys.map(async (key: string, index: number) => {
            return (
               <div
                  role="tabpanel"
                  aria-labelledby={`tab-${String(index)}`}
                  id={String(index)}
                  class:list={['panel', `panel-${index}`, panelClass]}
               >
                  <Fragment set:html={Astro.slots.render('default', [key])} />
               </div>
            );
         })
      }
   </div>
</div>