import React from 'react';
import CardStack from '@/components/cardStack/CardStack';
import type { CardStackProps } from '@/components/cardStack/CardStack';

interface BlogPost {
  id: string;
  category: string;
  title: string;
  excerpt: string;
  imageSrc: string;
  imageAlt?: string;
  authorName?: string;
  authorAvatar?: string;
  date?: string;
}

interface BlogCardOneProps extends Omit<CardStackProps, 'children'> {
  blogs: BlogPost[];
}

export const BlogCardOne: React.FC<BlogCardOneProps> = ({
  blogs,
  ...cardStackProps
}) => {
  const blogElements = blogs.map(blog => (
    <div key={blog.id} className="blog-card">
      <div className="blog-image">
        <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} />
      </div>
      <div className="blog-content">
        <span className="category">{blog.category}</span>
        <h3>{blog.title}</h3>
        <p>{blog.excerpt}</p>
        {blog.authorName && (
          <div className="author-info">
            {blog.authorAvatar && (
              <img src={blog.authorAvatar} alt={blog.authorName} className="avatar" />
            )}
            <div>
              <p className="author-name">{blog.authorName}</p>
              {blog.date && <p className="date">{blog.date}</p>}
            </div>
          </div>
        )}
      </div>
    </div>
  ));

  return (
    <CardStack {...cardStackProps}>
      {blogElements}
    </CardStack>
  );
};

export default BlogCardOne;