import { StarIcon, AvatarLabelGroup, VerifiedTick } from '../elements';
import { getAvatarUrl } from '../../utils/photo-helpers';
import type { Testimonial } from '../../types/api/testimonial';


interface TestimonialsHomeProps {
    testimonials: Testimonial[];
    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="flex flex-col items-center gap-16 bg-primary py-16 lg:py-24">
            <div className="flex max-w-container flex-col items-center gap-4 px-4 text-center lg:gap-5 lg:px-8">
                <h1 className="text-display-sm font-semibold text-primary lg:text-display-md">
                    {title}
                </h1>
                <p className="text-lg text-tertiary lg:text-xl">
                    {subtitle}
                </p>
            </div>
            
            {displayTestimonials && displayTestimonials.length > 0 ? (
                <div className="grid max-w-container grid-cols-1 gap-5 px-4 lg:grid-cols-3 lg:gap-6 lg:px-8">
                    {displayTestimonials.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);
                        
                        return (
                            <div 
                                key={testimonial.id || index} 
                                className="flex flex-col items-start gap-8 rounded-xl bg-secondary p-6 lg:justify-between lg:p-8"
                            >
                                <div className="flex flex-col items-start gap-4">
                                    <div aria-hidden="true" className="flex gap-1">
                                        <StarIcon />
                                        <StarIcon />
                                        <StarIcon />
                                        <StarIcon />
                                        <StarIcon />
                                    </div>
                                    <blockquote className="text-md font-medium text-primary">{quote}</blockquote>
                                </div>
                                <a href="#" className="group flex outline-hidden">
                                    <AvatarLabelGroup
                                        size="lg"
                                        src={avatarUrl}
                                        alt={reviewerName}
                                        title={
                                            <span className="relative flex items-center gap-1">
                                                {reviewerName}
                                                <VerifiedTick size="lg" />
                                            </span>
                                        }
                                        subtitle={<span className="underline decoration-1 underline-offset-4">{username}</span>}
                                    />
                                </a>
                            </div>
                        );
                    })}
                </div>
            ) : (
                <div className="text-center">
                    <p className="text-gray-500">No testimonials available</p>
                </div>
            )}
        </section>
    );
};
