import * as React from 'react'

export interface SettingsCardProps {
  title: string
  description?: string
  icon?: React.ElementType
  action?: React.ReactNode
  children?: React.ReactNode
}

/**
 * A titled settings panel with an optional trailing action.
 *
 * Theme-driven surfaces (startsim-1f3n): it used to hard-code
 * `bg-white text-gray-900`, which ignored every app's palette and was
 * unreadable in dark mode. Now it renders on the `card` token like the rest of
 * the system.
 */
export function SettingsCard({ title, description, icon: Icon, action, children }: SettingsCardProps) {
  return (
    <div className="rounded-xl border border-border bg-card text-card-foreground shadow-sm">
      <div className="flex flex-wrap items-start justify-between gap-4 p-6">
        <div className="flex min-w-0 items-start gap-4">
          {Icon && (
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
              <Icon className="h-5 w-5 text-primary" />
            </div>
          )}
          <div className="min-w-0">
            <h3 className="font-semibold leading-none tracking-tight">{title}</h3>
            {description && (
              <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>
            )}
          </div>
        </div>
        {action && <div className="shrink-0">{action}</div>}
      </div>
      {children && <div className="px-6 pb-6 pt-0">{children}</div>}
    </div>
  )
}