'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Card } from '@/components/ui/Card';

interface FAQProps {
  t: any;
}

export const FAQ: React.FC<FAQProps> = ({ t }) => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const defaultQuestions = [
    'account',
    'static_vs_dynamic',
    'forever',
    'file_type',
    'analytics',
  ];

  const questions = t?.faq?.questions
    ? Array.isArray(t.faq.questions)
      ? t.faq.questions
      : Object.keys(t.faq.questions).length > 5
        ? Object.keys(t.faq.questions).slice(0, 12)
        : defaultQuestions
    : defaultQuestions;

  return (
    <section id="faq" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
            {t.faq.title}
          </h2>
        </motion.div>

        <div className="max-w-3xl mx-auto space-y-4">
          {questions.map((key: string, index: number) => (
            <motion.div
              key={key}
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Card
                className="cursor-pointer border-gray-200 hover:border-gray-300 transition-colors"
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
              >
                <div className="p-6">
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold text-gray-900">
                      {t.faq.questions[key]?.question ||
                        t.faq.questions[key]?.question ||
                        key}
                    </h3>
                    <svg
                      className={`w-5 h-5 text-gray-500 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </div>

                  <AnimatePresence>
                    {openIndex === index && (
                      <motion.div
                        initial={{ height: 0, opacity: 0, marginTop: 0 }}
                        animate={{ height: 'auto', opacity: 1, marginTop: 16 }}
                        exit={{ height: 0, opacity: 0, marginTop: 0 }}
                        transition={{ duration: 0.3 }}
                        className="overflow-hidden"
                      >
                        <div className="text-gray-600">
                          {t.faq.questions[key]?.answer ||
                            t.faq.questions[key]?.answer ||
                            ''}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </Card>
            </motion.div>
          ))}
        </div>

        <div className="text-center mt-8">
          <a
            href="/faq"
            className="text-primary-600 hover:text-primary-700 font-medium"
          >
            View All Questions →
          </a>
        </div>
      </div>
    </section>
  );
};