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

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

export const BlogSection = ({
    blogPosts: postsData,
    title = "",
    subtitle = "",
    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 className="bg-secondary py-16 md:py-24">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Centered header */}
                <div className="text-center mb-16 max-w-3xl mx-auto">
                    <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl mb-4">
                        {title}
                    </h2>
                    {subtitle && (
                        <p className="font-body text-lg text-secondary">
                            {subtitle}
                        </p>
                    )}
                </div>

                <CarouselSectionWrapper 
                    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 bg-primary">
                                    <div className="w-full h-64 overflow-hidden">
                                        <PhotoWithFallback
                                            item={post}
                                            fallbackId={post.id}
                                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                        />
                                    </div>
                                    
                                    <div className="p-6 flex flex-col flex-grow">
                                        <p className="text-xs font-body font-medium uppercase tracking-wide mb-3 text-brand-accent">
                                            {formatDate(post.published_at)}
                                        </p>
                                        
                                        <h3 className="font-display text-2xl font-normal text-fg-primary mb-3 group-hover:text-brand-accent transition-colors line-clamp-2">
                                            {post.title}
                                        </h3>
                                        
                                        {excerpt && (
                                            <p className="font-body text-base leading-relaxed text-tertiary flex-grow line-clamp-3">
                                                {excerpt}
                                            </p>
                                        )}
                                        
                                        <span className="mt-4 font-body text-sm font-medium uppercase tracking-wide" style={{ color: 'var(--color-text-brand-accent)' }}>
                                            Read More →
                                        </span>
                                    </div>
                                </a>
                            </Carousel.Item>
                        );
                    })}
                </CarouselSectionWrapper>

                {postsArray.length > 0 && (
                    <div className="mt-12 text-center">
                        <Button
                            as="a"
                            href="/blog"
                            color="primary"
                            size="lg"
                            className="font-body font-medium"
                        >
                            View All Posts
                        </Button>
                    </div>
                )}
            </div>
        </section>
    );
};

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