---
import type { HTMLAttributes } from 'astro/types'

export type Props = HTMLAttributes<'div'> & {
  /** Must match the `tab` of the entry in the parent `tabs` prop. */
  tab: string
  /** Set on the panel matching `initialTab` — the others render hidden. */
  active?: boolean
}

const { tab, active = false, class: className, ...rest } = Astro.props
---

<div
  role="tabpanel"
  id={`au-tabpanel-${tab}`}
  aria-labelledby={`au-tab-${tab}`}
  data-tab={tab}
  hidden={!active}
  class:list={['au-tabs__children', `children-${tab}`, className]}
  {...rest}>
  <slot />
</div>