'use client';

import { api } from '@/lib/api';
import { useLanguage } from '@/lib/language-context';
import { useEffect, useState } from 'react';

interface Testimonial {
    _id: string;
    quote: string;
    rating?: number;
    authorName: string;
    role: string;
}

export default function TestimonialsPublicPage() {
    const { t } = useLanguage();
    const [items, setItems] = useState<Testimonial[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        api.content.getTestimonials().then((res) => {
            if (res.success && Array.isArray(res.data)) {
                setItems(res.data as Testimonial[]);
            }
        }).finally(() => setLoading(false));
    }, []);

    return (
        <div className="min-h-screen bg-white pt-20">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <h1 className="text-4xl font-bold text-gray-900 mb-8">{t('testimonials.allTestimonials')}</h1>
                {loading ? <p className="text-muted-foreground">{t('common.loading')}</p> : null}
                {!loading && items.length === 0 ? <p className="text-muted-foreground">{t('testimonials.noTestimonialsAvailable')}</p> : null}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {items.map((item) => (
                        <div key={item._id} className="bg-cyan-600 rounded-lg p-6 text-white">
                            <div className="mb-3 flex gap-1 text-yellow-400">
                                {Array.from({ length: item.rating || 5 }).map((_, i) => (
                                    <span key={i}>★</span>
                                ))}
                            </div>
                            <p className="mb-4 leading-relaxed">&quot;{item.quote}&quot;</p>
                            <p className="font-semibold">{item.authorName}</p>
                            <p className="text-sm text-cyan-100">{item.role}</p>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
