import { X } from 'lucide-react'

export default function BlockTypeSelector({ onSelect, onClose }) {
  const blockTypes = [
    { type: 'paragraph', label: '📝 Paragraph', desc: 'Text content' },
    { type: 'heading', label: '📌 Heading', desc: 'Section heading' },
    { type: 'image', label: '🖼️ Image', desc: 'Insert image' },
    { type: 'code', label: '💻 Code', desc: 'Code snippet' },
    { type: 'quote', label: '💬 Quote', desc: 'Block quote' },
    { type: 'divider', label: '━━ Divider', desc: 'Visual separator' },
    { type: 'list', label: '📋 List', desc: 'Bullet or numbered list' },
    { type: 'table', label: '📊 Table', desc: 'Data table' },
    { type: 'info', label: 'ℹ️ Info', desc: 'Info box' },
    { type: 'warning', label: '⚠️ Warning', desc: 'Warning box' },
    { type: 'error', label: '❌ Error', desc: 'Error box' },
    { type: 'success', label: '✅ Success', desc: 'Success box' },
    { type: 'cta', label: '🎯 CTA', desc: 'Call-to-action button' },
  ]

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-96 overflow-auto">
        <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex items-center justify-between">
          <h2 className="text-lg font-bold text-gray-900">Add Content Block</h2>
          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded">
            <X size={24} />
          </button>
        </div>

        <div className="p-6 grid sm:grid-cols-2 gap-4">
          {blockTypes.map(({ type, label, desc }) => (
            <button
              key={type}
              onClick={() => onSelect(type)}
              className="p-4 border border-gray-300 rounded-lg hover:border-blue-600 hover:bg-blue-50 transition text-left"
            >
              <h3 className="font-semibold text-gray-900">{label}</h3>
              <p className="text-sm text-gray-600">{desc}</p>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
