---
import type { Orientation } from './Tabs.astro';

export interface Props {
  value: string;
  class?: string;
  orientation?: Orientation;
}

const { value, class: className = '', orientation = 'vertical' } = Astro.props;
const panelId = `panel-${value}`;
const tabId = `tab-${value}`;

const orientationClasses = orientation === 'vertical' ? 'col-start-2 col-end-3' : 'w-full';
---

<div
  role="tabpanel"
  id={panelId}
  aria-labelledby={tabId}
  hidden
  data-state="inactive"
  data-tabs-content={value}
  data-orientation={orientation}
  class={`${orientationClasses} min-h-[3rem] rounded-[var(--sp-radius-card)] p-3 text-[color:var(--sp-fg-sub)] md:p-4 ${className}`}
>
  <div class="font-base text-[1.0625rem] leading-[1.65]">
    <slot />
  </div>
</div>