'use client'

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

export function SplitLayout({ element, children }: ComponentRenderProps) {
  const { ratio = '50/50', gap = 'md' } = element.props as { ratio?: string; gap?: string }
  const gapMap = { sm: 'gap-3', md: 'gap-6', lg: 'gap-8' }
  const ratioMap: Record<string, string> = {
    '50/50': 'grid-cols-1 sm:grid-cols-2',
    '33/67': 'grid-cols-1 sm:grid-cols-[1fr_2fr]',
    '67/33': 'grid-cols-1 sm:grid-cols-[2fr_1fr]',
  }

  return (
    <div className={`grid ${ratioMap[ratio] || ratioMap['50/50']} ${gapMap[gap as keyof typeof gapMap] || gapMap.md}`}>
      {children}
    </div>
  )
}
