"use client";

import React, { useState } from "react";
import TimelineBase from "./layouts/timelines/TimelineBase";

interface CardStackProps {
  children?: React.ReactNode;
  title: string;
  description?: string;
  mediaItems?: Array<{ id: string; imageSrc?: string; imageAlt?: string }>;
  tag?: string;
  tagIcon?: React.ComponentType<{ className?: string }>;
  textboxLayout?: string;
  animationType?: string;
  useInvertedBackground?: boolean;
  ariaLabel?: string;
  className?: string;
  gridVariant?: string;
  uniformGridCustomHeightClasses?: string;
  carouselThreshold?: number;
  carouselMode?: "auto" | "buttons";
  carouselItemClassName?: string;
  mode?: "auto" | "buttons";
}

export const CardStack: React.FC<CardStackProps> = ({
  children,
  title,
  description,
  mediaItems,
  tag,
  tagIcon: TagIcon,
  textboxLayout = "default",  animationType = "slide-up",  useInvertedBackground = false,
  ariaLabel = "Card stack section",  className = "",  gridVariant = "",  uniformGridCustomHeightClasses = "",  carouselThreshold = 5,
  carouselMode = "buttons"}) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <TimelineBase title={title} description={description}>
      {children}
    </TimelineBase>
  );
};

export default CardStack;
