'use client'
import { useState } from 'react'

export default function FaqAccordion({ faqs }: { faqs: { q: string; a: string }[] }) {
  const [open, setOpen] = useState<number | null>(0)
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {faqs.map((f, i) => (
        <div key={i} className="card" style={{ overflow: 'hidden' }}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 1.25rem', background: 'transparent', border: 'none', cursor: 'pointer', gap: 12, textAlign: 'left' }}
          >
            <span style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--heading)', lineHeight: 1.4 }}>{f.q}</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="2.5" strokeLinecap="round" style={{ flexShrink: 0, transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
              <polyline points="6,9 12,15 18,9"/>
            </svg>
          </button>
          {open === i && (
            <div style={{ padding: '0 1.25rem 1rem', fontSize: 13, color: 'var(--body)', lineHeight: 1.72, borderTop: '0.5px solid var(--border)' }}>
              <p style={{ margin: '0.75rem 0 0' }}>{f.a}</p>
            </div>
          )}
        </div>
      ))}
    </div>
  )
}