"use client"
import type { ComponentItem } from "@/contexts/composer-context"
import { getVariant } from "./component-variants-registry"

interface ComponentRendererProps {
  component: ComponentItem
}

export function ComponentRenderer({ component }: ComponentRendererProps) {
  // If it's a component variant, render it from the registry
  if (component.type === "component-variant" && component.componentId && component.variantId) {
    const variant = getVariant(component.componentId, component.variantId)

    if (!variant) {
      return (
        <div className="p-4 border border-red-300 bg-red-50 text-red-800 rounded-md">
          Component variant not found: {component.componentId}/{component.variantId}
        </div>
      )
    }

    return (
      <div className="p-4 border border-border rounded-lg bg-background">
        <div className="flex justify-center items-center">{variant.component}</div>
      </div>
    )
  }

  // For backward compatibility or unknown types
  return (
    <div className="p-4 border border-yellow-300 bg-yellow-50 text-yellow-800 rounded-md">
      This component type ({component.type}) is not supported in the current version.
    </div>
  )
}