import { RichText } from './rich-text'
import { Quote } from './quote'
import { Media } from './media'
import { Slider } from './slider'

import type { IRichText } from './rich-text'
import type { IQuote } from './quote'
import type { IMedia } from './media'
import type { ISlider } from './slider'

// Union type of all block types
export type Block = IRichText | IQuote | IMedia | ISlider

interface BlockRendererProps {
  blocks: Array<Block>
}

/**
 * BlockRenderer - Renders dynamic content blocks from Strapi
 *
 * Usage:
 * ```tsx
 * <BlockRenderer blocks={article.blocks} />
 * ```
 */
export function BlockRenderer({ blocks }: Readonly<BlockRendererProps>) {
  if (!blocks || blocks.length === 0) return null

  const renderBlock = (block: Block) => {
    switch (block.__component) {
      case 'shared.rich-text':
        return <RichText {...block} />
      case 'shared.quote':
        return <Quote {...block} />
      case 'shared.media':
        return <Media {...block} />
      case 'shared.slider':
        return <Slider {...block} />
      default:
        // Log unknown block types in development
        console.warn('Unknown block type:', (block as any).__component)
        return null
    }
  }

  return (
    <div className="space-y-6">
      {blocks.map((block, index) => (
        <div key={`${block.__component}-${block.id}-${index}`}>
          {renderBlock(block)}
        </div>
      ))}
    </div>
  )
}