"use client"

import React from 'react'

export default function SidebarComponents({
  onAddHero,
  onAddFAQ,
  onAddCTA,
  onAddFeatures,
  onAddTestimonials,
}: {
  onAddHero: () => void
  onAddFAQ: () => void
  onAddCTA: () => void
  onAddFeatures: () => void
  onAddTestimonials: () => void
}) {
  return (
    <div className="space-y-2" data-testid="sidebar-components">
      <h2 className="text-sm font-semibold">Components</h2>
      <div className="grid grid-cols-1 gap-2">
        <button data-testid="card-hero" className="border rounded p-2 text-left" onClick={onAddHero}>
          <div className="text-sm font-medium">Hero</div>
          <div className="text-xs text-gray-500">Large heading + image</div>
        </button>
        <button data-testid="card-faq" className="border rounded p-2 text-left" onClick={onAddFAQ}>
          <div className="text-sm font-medium">FAQ</div>
          <div className="text-xs text-gray-500">Questions & answers</div>
        </button>
        <button data-testid="card-cta" className="border rounded p-2 text-left" onClick={onAddCTA}>
          <div className="text-sm font-medium">CTA</div>
          <div className="text-xs text-gray-500">Action button</div>
        </button>
        <button data-testid="card-features" className="border rounded p-2 text-left" onClick={onAddFeatures}>
          <div className="text-sm font-medium">Features</div>
          <div className="text-xs text-gray-500">List of product features</div>
        </button>
        <button data-testid="card-testimonials" className="border rounded p-2 text-left" onClick={onAddTestimonials}>
          <div className="text-sm font-medium">Testimonials</div>
          <div className="text-xs text-gray-500">Customer quotes</div>
        </button>
      </div>
    </div>
  )
}