import { ChevronDown, ChevronUp, HelpCircle } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type { EsaFaqItem } from '@/shared/types/esaFunding';
import { cn } from '@/lib/utils';

interface EsaFundingFaqProps {
  readonly items: readonly EsaFaqItem[];
  readonly expandedFAQ: number | null;
  readonly onToggleFAQ: (index: number) => void;
}

export function EsaFundingFaq({
  items,
  expandedFAQ,
  onToggleFAQ,
}: EsaFundingFaqProps) {
  if (items.length === 0) {
    return null;
  }

  return (
    <section>
      <div className="flex items-center gap-2 mb-4">
        <HelpCircle size={20} className="text-emerald-400" />
        <h2 className="text-lg font-bold text-white">Frequently Asked Questions</h2>
      </div>
      <div className="space-y-2">
        {items.map((faq, index) => {
          const expanded = expandedFAQ === index;

          return (
            <div
              key={faq.question}
              className={cn(
                'bg-slate-800/60 backdrop-blur-sm rounded-xl border transition-all',
                expanded ? 'border-emerald-500/30 shadow-lg shadow-emerald-500/5' : 'border-slate-700/50',
              )}
            >
              <Button
                type="button"
                variant="ghost"
                onClick={() => onToggleFAQ(index)}
                className="w-full h-auto flex items-center justify-between p-4 text-left whitespace-normal"
                aria-expanded={expanded}
              >
                <span className="flex items-center gap-3">
                  <span className={cn(
                    'w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors',
                    expanded ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-700/50 text-slate-500',
                  )}
                  >
                    <span className="text-xs font-bold">{index + 1}</span>
                  </span>
                  <span className={cn('text-sm font-semibold transition-colors', expanded ? 'text-white' : 'text-slate-300')}>
                    {faq.question}
                  </span>
                </span>
                {expanded ? (
                  <ChevronUp size={18} className="text-emerald-400 flex-shrink-0" />
                ) : (
                  <ChevronDown size={18} className="text-slate-500 flex-shrink-0" />
                )}
              </Button>
              {expanded && (
                <div className="px-4 pb-4 pt-0">
                  <div className="ml-10 text-sm text-slate-400 leading-relaxed border-t border-slate-700/50 pt-3">
                    {faq.answer}
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}
