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

interface TestimonialsGridProps {
    testimonials?: Testimonial[] | null;
    title?: string;
    subtitle?: string;
}

export const TestimonialsGrid = ({
    testimonials: testimonialsData,
    title = "",
    subtitle = ""
}: TestimonialsGridProps) => {
    const testimonials = Array.isArray(testimonialsData) ? testimonialsData : [];
    
    return (
        <section className="py-16 md:py-24">
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                {(title || subtitle) && (
                    <div className="mx-auto mb-12 flex w-full max-w-3xl flex-col items-center text-center">
                        {title && (
                            <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}

                {testimonials.length > 0 ? (
                    <div className="grid max-w-container grid-cols-1 gap-5 lg:grid-cols-3 lg:gap-6">
                        {testimonials.map((testimonial, index) => {
                            const reviewerName = testimonial.reviewer_name || 'Customer';
                            const quote = testimonial.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
                            const username = `@${reviewerName.toLowerCase().replace(/\s+/g, '')}`;
                            const avatarUrl = getAvatarUrl(testimonial.photo_attachments, testimonial.id, reviewerName);
                            const rating = testimonial.rating || 5;
                            
                            return (
                                <div key={testimonial.id || index} className="flex flex-col gap-6 rounded-2xl bg-secondary p-6 md:p-8">
                                    <div className="flex gap-0.5">
                                        {Array.from({ length: 5 }).map((_, i) => (
                                            <svg
                                                key={i}
                                                className="size-5"
                                                fill={i < rating ? "currentColor" : "none"}
                                                stroke={i < rating ? "none" : "currentColor"}
                                                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>

                                    <p className="text-md text-primary">
                                        {quote}
                                    </p>

                                    <div className="flex items-center gap-3 mt-auto">
                                        <div className="size-12 shrink-0 overflow-hidden rounded-full">
                                            <PhotoWithFallback
                                                photoUrl={avatarUrl}
                                                photoAlt={reviewerName}
                                                fallbackId={`testimonial-${testimonial.id || index}`}
                                                className="size-full object-cover"
                                            />
                                        </div>
                                        <div>
                                            <p className="text-sm font-semibold text-primary">
                                                {reviewerName}
                                            </p>
                                            <p className="text-sm text-tertiary">
                                                {username}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <div className="text-center py-12">
                        <p className="text-gray-500">No testimonials available</p>
                    </div>
                )}
            </div>
        </section>
    );
};

