import React from 'react';
import { PhotoWithFallback, Carousel, CarouselSectionWrapper } from '../elements';
import type { BlogPost } from '../../types/api/blog-post';

interface BlogSectionProps {
    blogPosts?: BlogPost[] | null;
    title?: string;
    maxPosts?: number;
}

export const BlogSection = ({
    blogPosts: postsData,
    title = "",
    maxPosts,
}: BlogSectionProps) => {
    
    const postsArray = Array.isArray(postsData) ? (maxPosts ? postsData.slice(0, maxPosts) : postsData) : [];

    const formatDate = (dateString?: string) => {
        if (!dateString) return 'Recent';
        try {
            return new Date(dateString).toLocaleDateString('en-US', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            });
        } catch {
            return 'Recent';
        }
    };

    return (
        <section>
            <div className="mx-auto max-w-container px-4 md:px-8">
                <CarouselSectionWrapper 
                    title={title} 
                    hasItems={postsArray.length > 0}
                    emptyMessage="No posts available"
                >
                    {postsArray.map((post: BlogPost) => {
                        const excerpt = post.content_markdown?.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) || '';
                        
                        return (
                            <Carousel.Item key={post.id} className="pl-4 md:basis-1/2 lg:basis-1/3">
                                <a href={`/blog/${post.slug}`} className="flex flex-col h-full group">
                                    <div className="w-full h-64 mb-6 overflow-hidden">
                                        <PhotoWithFallback
                                            item={post}
                                            fallbackId={post.id}
                                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                        />
                                    </div>
                                    
                                    <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
                                        {formatDate(post.published_at)}
                                    </p>
                                    
                                    <h3 className="font-display text-2xl font-normal text-fg-primary mb-4 group-hover:underline line-clamp-1">
                                        {post.title}
                                    </h3>
                                    
                                    {excerpt && (
                                        <p className="font-body text-base leading-relaxed text-tertiary mb-4 flex-grow line-clamp-3">
                                            {excerpt}
                                        </p>
                                    )}
                                </a>
                            </Carousel.Item>
                        );
                    })}
                </CarouselSectionWrapper>
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('blog-section', 'aman', BlogSection);
