import React from 'react';
import { PhotoWithFallback, Carousel, Button } from '../elements';
import type { BlogPost } from '../../types/api/blog-post';
import { ChevronLeft, ChevronRight } from '@untitledui/icons';

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

export const BlogSection = ({
    blogPosts: postsData,
    title = "",
    subtitle = "",
    maxPosts,
    viewAllText = "View All Posts",
    viewAllHref = "/blog",
    emptyMessage = "No blog posts available",
    recentLabel = "Recent",
}: BlogSectionProps) => {
    
    const postsArray = Array.isArray(postsData) ? (maxPosts ? postsData.slice(0, maxPosts) : postsData) : [];

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

    return (
        <section className="py-16 md:py-20 lg:py-24 bg-primary">
            <div className="mx-auto max-w-7xl px-4 md:px-8">
                {/* Section Header - Centered */}
                <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
                    <h2 className="font-display text-4xl font-medium text-fg-primary md:text-5xl mb-4">
                        {title}
                    </h2>
                    <p className="font-body text-lg text-secondary leading-normal">
                        {subtitle}
                    </p>
                </div>

                {postsArray.length > 0 ? (
                    <Carousel.Root opts={{ align: "start", loop: true }}>
                        <div className="flex items-center justify-end mb-8">
                            <div className="flex gap-2">
                                <Carousel.PrevTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronLeft className="w-6 h-6 text-fg-primary" />
                                </Carousel.PrevTrigger>
                                <Carousel.NextTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronRight className="w-6 h-6 text-fg-primary" />
                                </Carousel.NextTrigger>
                            </div>
                        </div>
                        
                        <Carousel.Content className="-ml-4">
                            {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 group">
                                            <div className="w-full h-64 mb-6 overflow-hidden rounded-2xl">
                                                <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-2">
                                                {post.title}
                                            </h3>
                                            
                                            {excerpt && (
                                                <p className="font-body text-base leading-relaxed text-tertiary mb-4 line-clamp-3">
                                                    {excerpt}
                                                </p>
                                            )}
                                        </a>
                                    </Carousel.Item>
                                );
                            })}
                        </Carousel.Content>
                    </Carousel.Root>
                ) : (
                    <div className="text-center py-12">
                        <p className="font-body text-base text-tertiary">{emptyMessage}</p>
                    </div>
                )}

                {/* View All Posts Button */}
                {postsArray.length > 0 && viewAllText && (
                    <div className="mt-12 text-center">
                        <Button
                            href={viewAllHref}
                            color="primary"
                            size="md"
                        >
                            {viewAllText}
                        </Button>
                    </div>
                )}
            </div>
        </section>
    );
};

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