'use client';

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Breadcrumb } from '@/components/common/Breadcrumb';
import { useLanguage } from '@/contexts/LanguageContext';
import { FAQItem } from '@/types';

interface FAQPageContentProps {
  faqs: FAQItem[];
}

export default function FAQPageContent({ faqs }: FAQPageContentProps) {
  const { t } = useLanguage();

  return (
    <div className="min-h-screen bg-background">
      <section className="border-b border-border/60 bg-gradient-to-br from-primary/5 via-background to-secondary/5">
        <div className="container mx-auto px-4 py-14">
          <div className="max-w-4xl">
            <h1 className="mb-4 text-4xl font-display font-bold text-foreground md:text-5xl">
              {t('الأسئلة الشائعة', 'FAQ')}
            </h1>
            <p className="text-lg text-muted-foreground">
              {t(
                'إجابات مختصرة وواضحة على أكثر الأسئلة شيوعًا حول الجامعة والقبول والخدمات.',
                'Short, clear answers to the most common questions about the university, admission, and services.'
              )}
            </p>
          </div>
        </div>
      </section>

      <div className="container mx-auto px-4 py-8">
        <div data-breadcrumb="local">
          <Breadcrumb items={[{ label: { ar: 'الأسئلة الشائعة', en: 'FAQ' } }]} />
        </div>

        <div className="rounded-3xl border border-border/60 bg-card p-6 shadow-sm md:p-8">
          {faqs.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-border px-6 py-16 text-center text-muted-foreground">
              {t('لا توجد أسئلة منشورة حاليًا', 'No published FAQs yet')}
            </div>
          ) : (
            <Accordion type="single" collapsible className="space-y-4">
              {faqs.map((faq) => (
                <AccordionItem
                  key={faq.id}
                  value={faq.id}
                  className="rounded-2xl border border-border/60 bg-background px-5 transition-colors hover:border-primary/40"
                >
                  <AccordionTrigger className="text-right text-lg font-semibold hover:no-underline">
                    {t(faq.questionAr, faq.questionEn)}
                  </AccordionTrigger>
                  <AccordionContent className="pt-3 text-base leading-8 text-muted-foreground">
                    {t(faq.answerAr, faq.answerEn)}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          )}
        </div>
      </div>
    </div>
  );
}