'use client'

import type { ComponentRenderProps } from '@json-render/react'
import { useActions } from '@json-render/react'

const variantClasses: Record<string, string> = {
  primary: 'bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm',
  secondary: 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 shadow-sm',
  danger: 'bg-red-600 hover:bg-red-700 text-white shadow-sm',
  ghost: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
}

const sizeClasses: Record<string, string> = {
  sm: 'px-3 py-1.5 text-xs',
  md: 'px-4 py-2 text-sm',
  lg: 'px-6 py-2.5 text-base',
}

export function ActionButton({ element }: ComponentRenderProps) {
  const { label, variant = 'secondary', size = 'md', disabled } = element.props as {
    label: string; variant?: string; size?: string; icon?: string; disabled?: boolean
  }
  const { execute } = useActions()

  // The action is on the element itself
  const action = (element as { props: Record<string, unknown> }).props.action as { name: string; params?: Record<string, unknown> } | undefined

  return (
    <button
      disabled={disabled}
      onClick={() => action && execute(action)}
      className={`rounded-lg font-medium transition-colors disabled:opacity-50 ${variantClasses[variant] || variantClasses.secondary} ${sizeClasses[size] || sizeClasses.md}`}
    >
      {label}
    </button>
  )
}
