---
import { Image } from "astro:assets";
import ImageMod from "./ImageMod.astro";

interface Props {
  title: string;
  subtitle: string;
  number: number;
  image: string;
  imageAlt: string;
  isActive?: boolean;
}

const {
  title,
  subtitle,
  number,
  image,
  imageAlt,
  isActive = false,
} = Astro.props;
---

<div class="hero-tab-item">
  <div class="hero-tab-nav" data-active={isActive}>
    <button class="tab-button" data-tab={number}>
      <span class="tab-number">{number}</span>
      <div class="tab-content">
        <h3 class="tab-title">{title}</h3>
        <p class="tab-subtitle">{subtitle}</p>
      </div>
    </button>
  </div>

  <div class="hero-tab-content" data-panel={number} data-active={isActive}>
    <ImageMod
      src={image}
      alt={imageAlt}
      class="tab-image w-full"
      height={1400}
      width={2000}
    />

  </div>
</div>
