/**
 * Settings Layout Components
 * 
 * Provides consistent 2-column layout for settings pages
 */

import { ReactNode } from "react"

interface SettingsGridProps {
  children: ReactNode
  className?: string
}

/**
 * 2-column grid layout for settings content
 * Stacks to 1 column on smaller screens
 */
export function SettingsGrid({ children, className = "" }: SettingsGridProps) {
  return (
    <div className={`grid gap-6 lg:grid-cols-2 ${className}`}>
      {children}
    </div>
  )
}

/**
 * Full-width section that spans both columns
 */
export function SettingsFullWidth({ children, className = "" }: SettingsGridProps) {
  return (
    <div className={`lg:col-span-2 ${className}`}>
      {children}
    </div>
  )
}

/**
 * Single column section
 */
export function SettingsColumn({ children, className = "" }: SettingsGridProps) {
  return (
    <div className={`space-y-6 ${className}`}>
      {children}
    </div>
  )
}