HOME

‘use client’

import { useState } from ‘react’

import { ChevronDown } from ‘lucide-react’

export interface FaqItem {

  question: string;

  answer: string;

}

export default function FaqAccordion({ items }: { items: FaqItem[] }) {

  const [open, setOpen] = useState<number | null>(null)

  return (

    <div className=”space-y-3″>

      {items.map((item, i) => (

        <div key={i} className={`rounded-xl overflow-hidden transition-all duration-300 border ${open === i ? ‘border-blue-500 bg-slate-900/40’ : ‘border-slate-800 bg-[#141417]’}`}>

          <button

            onClick={() => setOpen(open === i ? null : i)}

            className=”w-full flex items-center justify-between p-4

                       text-left font-medium transition-all duration-200

                       hover:bg-white/5 outline-none tracking-wide text-sm”

            style={{ color: open === i ? ‘#60a5fa’ : ‘#cbd5e1’ }}>

            <span>{item.question}</span>

            <ChevronDown

              className=”w-5 h-5 flex-shrink-0 ml-4 transition-transform

                         duration-300″

              style={{

                color: ‘#3b82f6’,

                transform: open === i ? ‘rotate(180deg)’ : ‘rotate(0deg)’,

              }}

            />

          </button>

          <div style={{

            maxHeight: open === i ? ‘500px’ : ‘0’,

            overflow: ‘hidden’,

            transition: ‘max-height 0.35s ease’,

          }}>

            <p className=”px-4 pb-4 text-sm leading-relaxed”

              style={{ color: ‘#94a3b8’ }}>

              {item.answer}

            </p>

          </div>

        </div>

      ))}

    </div>

  )

}