import React, { useMemo } from "react";
import { CardStack, CardStackProps } from "@/components/cardStack";
import { cn } from "@/lib/utils";

export interface TimelineItem {
  id: string;
  reverse?: boolean;
  media?: React.ReactNode;
  content?: React.ReactNode;
}

export interface TimelineBaseProps extends Omit<CardStackProps, "items"> {
  items: TimelineItem[];
  animationType?: "slide-up" | "none" | "opacity" | "blur-reveal";
}

export const TimelineBase: React.FC<TimelineBaseProps> = ({
  items,
  animationType = "slide-up",  className,
  containerClassName,
  ...props
}) => {
  const timelineItems = useMemo(
    () =>
      items.map((item) => ({
        id: item.id,
        title: "",        description: "",        content: item.content,
        media: item.media,
        reverse: item.reverse
      })),
    [items]
  );

  return (
    <CardStack
      items={timelineItems}
      className={cn("timeline-base", className)}
      containerClassName={containerClassName}
      {...props}
    />
  );
};

export default TimelineBase;
