import * as React from 'react'

export interface SettingsNavItem {
  id: string
  label: string
  href: string
  icon?: React.ElementType
}

export interface SettingsLayoutProps {
  children: React.ReactNode
  title?: string
  description?: string
}

export function SettingsLayout({ children, title, description }: SettingsLayoutProps) {
  return (
    <div className="space-y-6 max-w-4xl">
      {title && (
        <div>
          <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
          {description && <p className="text-gray-600 mt-1">{description}</p>}
        </div>
      )}
      {children}
    </div>
  )
}