'use client'

import { ChevronDown } from 'lucide-react'
import type { BlockPreviewProps } from './index.js'

interface FAQItem {
  question?: string
  answer?: string
}

export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
  const items = (data.items as FAQItem[]) || []

  const placeholderItems: FAQItem[] =
    items.length > 0
      ? items
      : [
          { question: 'What is this?', answer: 'Answer to the first question goes here.' },
          { question: 'How does it work?', answer: 'Answer to the second question goes here.' },
          {
            question: 'Where can I learn more?',
            answer: 'Answer to the third question goes here.',
          },
        ]

  if (variant === 'two-column') {
    const mid = Math.ceil(placeholderItems.length / 2)
    const col1 = placeholderItems.slice(0, mid)
    const col2 = placeholderItems.slice(mid)

    return (
      <div className="border-border rounded-md border p-4">
        <div className="grid grid-cols-2 gap-4">
          {[col1, col2].map((column, colIdx) => (
            <div key={colIdx} className="flex flex-col gap-3">
              {column.map((item, i) => (
                <div key={i} className="border-border rounded-md border p-3">
                  <p className="text-foreground text-sm font-medium">
                    {item.question || 'Question?'}
                  </p>
                  <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                    {item.answer || 'Answer text…'}
                  </p>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (variant === 'list') {
    return (
      <div className="border-border rounded-md border p-4">
        <div className="flex flex-col gap-3">
          {placeholderItems.map((item, i) => (
            <div key={i} className="border-border border-b pb-3 last:border-b-0 last:pb-0">
              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
              <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                {item.answer || 'Answer text…'}
              </p>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="border-border rounded-md border p-4">
      <div className="flex flex-col gap-2">
        {placeholderItems.map((item, i) => (
          <div key={i} className="border-border rounded-md border p-3">
            <div className="flex items-center justify-between">
              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
              <ChevronDown size={14} className="text-muted-foreground shrink-0" />
            </div>
            {i === 0 && (
              <p className="text-muted-foreground mt-2 text-xs">{item.answer || 'Answer text…'}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}
