import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";

interface BlogCardThreeProps {
  blogs?: any[];
  title?: string;
  description?: string;
  animationType?: string;
  textboxLayout?: string;
  useInvertedBackground?: boolean;
}

export default function BlogCardThree({
  blogs = [],
  title = "Blog",  description = "Latest articles",  animationType = "slide-up",  textboxLayout = "default",  useInvertedBackground = false,
}: BlogCardThreeProps) {
  const items = blogs.map((blog) => ({
    id: blog.id,
    label: blog.title,
    detail: blog.excerpt,
  }));

  return (
    <div className="blog-card-three">
      <CardStack items={items} />
    </div>
  );
}