import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Program } from "@/types/models";
import { useTranslations } from "next-intl";

export function QA({ program }: { program: Program }) {
    const t = useTranslations();
    
    if (!program) {
        return (
            <div className="text-center py-8">
                <p className="text-gray-700 text-lg font-medium">
                    {t("programs.no faqs")}
                </p>
            </div>
        );
    }
    
    // Filter out FAQs with null or empty values
    const faqs = (program?.faqs || []).filter(
        faq => faq?.question && faq?.answer && 
               faq.question.trim() !== '' && faq.answer.trim() !== ''
    );

    return (
        <div className="w-full max-w-5xl mx-auto">
            <div className="space-y-6">
                {faqs.length > 0 ? (
                    faqs.map((faq, index) => (
                        <div key={index} className="border-b border-gray-200 pb-4 last:border-b-0">
                            <div className="flex gap-4">
                                <Avatar className="size-16 flex-shrink-0">
                                    <AvatarFallback className="bg-blue-500 text-white text-lg font-semibold">
                                        {faq.question?.[0]?.toUpperCase() || 'Q'}
                                    </AvatarFallback>
                                </Avatar>

                                <div className="flex-1">
                                    <div className="flex items-center gap-3 mb-1">
                                        <h4 className="font-semibold text-gray-900 text-lg">
                                            {faq.question}
                                        </h4>
                                    </div>
                                    <p className="text-gray-600 leading-relaxed">
                                        {faq.answer}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))
                ) : (
                    <div className="text-center py-8">
                        <p className="text-gray-700 text-lg font-medium">
                            {t("programs.no faqs")}
                        </p>
                    </div>
                )}
            </div>
        </div>
    )
}