'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/shared/ui/accordion';
import { Card, CardContent } from '@/shared/ui/card';
import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import { faq_api } from '../lib/api';

const Faq = () => {
  const t = useTranslations();
  const { data } = useQuery({
    queryKey: ['faq_list'],
    queryFn: () => faq_api.list(),
    select(data) {
      return data.data;
    },
  });

  return (
    <main className="custom-container">
      <section className="relative py-5 from-accent/5 to-background">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-2xl md:text-5xl font-bold mb-4 text-balance">
            {t("Tez-tez So'raladigan Savollar")}
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            {t(
              "Gastro Market haqida eng ko'p so'raladigan savollarga javoblar",
            )}
          </p>
        </div>
      </section>

      <section className="py-5">
        <>
          <div className="space-y-2">
            {data &&
              data.map((category, idx) => (
                <div key={idx}>
                  <Card className="p-0">
                    <CardContent>
                      <Accordion type="single" collapsible className="w-full">
                        <AccordionItem
                          value={`item-${idx}`}
                          className="border-b last:border-b-0"
                        >
                          <AccordionTrigger className="text-left hover:no-underline py-4">
                            <span className="font-semibold text-lg">
                              {category.question}
                            </span>
                          </AccordionTrigger>
                          <AccordionContent className="text-muted-foreground leading-relaxed pb-4">
                            {category.answer}
                          </AccordionContent>
                        </AccordionItem>
                      </Accordion>
                    </CardContent>
                  </Card>
                </div>
              ))}
          </div>
        </>
      </section>
    </main>
  );
};

export default Faq;
