'use client'
import React from 'react'
import { motion } from 'framer-motion'
import Link from 'next/link'
import type { Page } from '../../payload-types'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>

export const FAQTeaserBlock: React.FC<Props> = ({ eyebrow, title, questions, linkText }) => {
  return (
    <section className="py-20 md:py-32 bg-card/40 border-t border-border">
      <div className="container-premium">
        <div className="max-w-3xl mb-16 md:mb-24">
          {eyebrow && (
            <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
              // {eyebrow}
            </div>
          )}
          <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
            {title}
          </h2>
        </div>

        <div className="space-y-6 mb-12">
          {questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
            <div 
              key={q.id || index}
              className="py-6 border-b border-border/50 first:border-t"
            >
              <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-3">{q.question}</h3>
              <p className="text-foreground/75 leading-relaxed">{q.answer}</p>
            </div>
          ))}
        </div>

        {linkText && (
          <div className="mt-12">
            <Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
              {linkText}
            </Link>
          </div>
        )}
      </div>
    </section>
  )
}