import React from 'react';
import { Avatar, Carousel, CarouselSectionWrapper } from '../elements';
import type { Testimonial } from '../../types/api/testimonial';
import { getAvatarUrl } from '../../utils/photo-helpers';

interface TestimonialsHomeProps {
    testimonials?: Testimonial[] | null;
    title?: string;
    subtitle?: string;
    perPage?: number;
}

export const TestimonialsHome = ({
    testimonials: testimonialsData,
    title = "",
    subtitle = "",
    perPage,
}: TestimonialsHomeProps) => {
    const testimonials = Array.isArray(testimonialsData) ? testimonialsData : [];
    const displayTestimonials = perPage ? testimonials.slice(0, perPage) : testimonials;

    return (
        <section className="bg-primary py-16 md:py-24">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Centered header */}
                <div className="text-center mb-12 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={displayTestimonials.length > 0}
                    emptyMessage="No testimonials available"
                >
                    {displayTestimonials.map((testimonial, i: number) => {
                        const quote = testimonial.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
                        const reviewerName = testimonial.reviewer_name || 'Customer';
                        const avatarUrl = getAvatarUrl(testimonial.photo_attachments, testimonial.id, reviewerName);
                        const rating = testimonial.rating || 5;
                        
                        // Get initials from reviewer name
                        const initials = reviewerName
                            .split(' ')
                            .map(n => n[0])
                            .join('')
                            .toUpperCase()
                            .slice(0, 2);
                        
                        return (
                            <Carousel.Item key={testimonial.id || i} className="pl-4 md:basis-1/2 lg:basis-1/3">
                                <div className="bg-secondary/30 p-8 h-full flex flex-col">
                                    {/* Stars */}
                                    <div className="flex gap-1 mb-6">
                                        {Array.from({ length: 5 }).map((_, starIdx) => (
                                            <svg
                                                key={starIdx}
                                                className="w-5 h-5"
                                                style={{
                                                    fill: starIdx < rating ? "var(--color-text-brand-secondary)" : "none",
                                                    stroke: starIdx < rating ? "none" : "var(--color-border-primary)"
                                                }}
                                                strokeWidth="2"
                                                viewBox="0 0 24 24"
                                            >
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                            </svg>
                                        ))}
                                    </div>

                                    {/* Quote */}
                                    <p className="font-body text-base leading-relaxed text-secondary mb-8 flex-grow">
                                        &quot;{quote}&quot;
                                    </p>

                                    {/* Reviewer info */}
                                    <div className="flex items-center gap-4 pt-6 border-t border-primary/20">
                                        <Avatar
                                            src={avatarUrl}
                                            alt={reviewerName}
                                            initials={initials}
                                            size="xl"
                                        />
                                        <div>
                                            <p className="font-body text-sm font-medium text-fg-primary">
                                                {reviewerName}
                                            </p>
                                            <p className="font-body text-xs text-tertiary mt-0.5">
                                                Verified Customer
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </Carousel.Item>
                        );
                    })}
                </CarouselSectionWrapper>
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('testimonials-home', 'balance', TestimonialsHome);
