columns.tsx

import React from 'react'
import { clsx } from 'clsx'

interface ColumnsProps {
  children: React.ReactNode
  className?: string
  /** Gap between columns - provide full Tailwind classes like 'gap-4 lg:gap-8' */
  gap?: string
  /** Grid columns - provide full Tailwind classes like 'grid-cols-1 lg:grid-cols-2' */
  cols?: string
  /** Alignment - provide full Tailwind classes like 'items-center' */
  align?: string
  reverseColumns?: boolean
}

function getColumnsDefaults() {
  return {
    gap: 'gap-20 lg:gap-20',
    cols: 'grid-cols-1 lg:grid-cols-2',
    align: 'items-center',