import { AlertCircle, AlertTriangle, Info, Lightbulb } from 'lucide-react'

export default function BlockRenderer({ block }) {
  if (!block) return null

  switch (block.type) {
    case 'paragraph':
      return <p className="text-gray-800 mb-4 leading-relaxed">{block.content?.text || ''}</p>

    case 'heading':
      const level = block.content?.level || 2
      const headingClass = {
        1: 'text-4xl font-bold',
        2: 'text-3xl font-bold',
        3: 'text-2xl font-bold',
      }[level] || 'text-2xl font-bold'
      const tag = `h${level}`
      return <h2 className={`${headingClass} text-gray-900 mb-4 mt-8`}>{block.content?.text || ''}</h2>

    case 'image':
      return (
        <figure className="my-8">
          <img
            src={block.content?.url || ''}
            alt={block.content?.alt || ''}
            className="w-full rounded-lg shadow-md"
          />
          {block.content?.caption && (
            <figcaption className="text-center text-gray-600 text-sm mt-2">
              {block.content.caption}
            </figcaption>
          )}
        </figure>
      )

    case 'code':
      return (
        <pre className="bg-gray-900 text-white p-6 rounded-lg overflow-x-auto mb-4">
          <code className="text-sm">{block.content?.code || ''}</code>
        </pre>
      )

    case 'quote':
      return (
        <blockquote className="border-l-4 border-blue-600 pl-6 py-2 mb-4 italic text-gray-700">
          {block.content?.text || ''}
        </blockquote>
      )

    case 'divider':
      return <hr className="my-8 border-gray-300" />

    case 'info':
      return (
        <div className="bg-blue-50 border-l-4 border-blue-600 p-4 mb-4 rounded">
          <div className="flex items-start gap-3">
            <Info className="text-blue-600 flex-shrink-0 mt-0.5" size={20} />
            <p className="text-blue-900">{block.content?.text || ''}</p>
          </div>
        </div>
      )

    case 'warning':
      return (
        <div className="bg-yellow-50 border-l-4 border-yellow-600 p-4 mb-4 rounded">
          <div className="flex items-start gap-3">
            <AlertTriangle className="text-yellow-600 flex-shrink-0 mt-0.5" size={20} />
            <p className="text-yellow-900">{block.content?.text || ''}</p>
          </div>
        </div>
      )

    case 'error':
      return (
        <div className="bg-red-50 border-l-4 border-red-600 p-4 mb-4 rounded">
          <div className="flex items-start gap-3">
            <AlertCircle className="text-red-600 flex-shrink-0 mt-0.5" size={20} />
            <p className="text-red-900">{block.content?.text || ''}</p>
          </div>
        </div>
      )

    case 'success':
      return (
        <div className="bg-green-50 border-l-4 border-green-600 p-4 mb-4 rounded">
          <div className="flex items-start gap-3">
            <Lightbulb className="text-green-600 flex-shrink-0 mt-0.5" size={20} />
            <p className="text-green-900">{block.content?.text || ''}</p>
          </div>
        </div>
      )

    case 'list':
      const isOrdered = block.content?.ordered
      const List = isOrdered ? 'ol' : 'ul'
      return (
        <List className={`mb-4 pl-6 ${isOrdered ? 'list-decimal' : 'list-disc'}`}>
          {(block.content?.items || []).map((item, i) => (
            <li key={i} className="mb-2 text-gray-800">
              {item}
            </li>
          ))}
        </List>
      )

    case 'table':
      return (
        <div className="overflow-x-auto mb-4">
          <table className="w-full border-collapse border border-gray-300">
            <tbody>
              {(block.content?.rows || []).map((row, i) => (
                <tr key={i} className={i === 0 ? 'bg-gray-100' : ''}>
                  {(row || []).map((cell, j) => (
                    <td
                      key={j}
                      className="border border-gray-300 p-3 text-gray-800"
                    >
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )

    case 'cta':
      return (
        <div className="bg-blue-100 border border-blue-300 p-6 rounded-lg mb-4 text-center">
          <p className="text-blue-900 mb-4">{block.content?.text || ''}</p>
          <a
            href={block.content?.link || '#'}
            className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
          >
            {block.content?.button_text || 'Learn More'}
          </a>
        </div>
      )

    default:
      return null
  }
}
