'use client'

import type { ReactNode } from 'react'

/**
 * Bordered panel with a header divider — Dashboard, modals, and list-heavy views.
 * Matches Settings/Section card rhythm: `px-6` gutters, `py-4` header, body flush
 * below the divider with its own padding.
 */
export function PanelSection({
  title,
  description,
  action,
  children,
  className = '',
}: {
  title?: ReactNode
  description?: ReactNode
  action?: ReactNode
  children: ReactNode
  className?: string
}) {
  return (
    <section
      className={`bg-card border-border overflow-hidden rounded-xl border shadow-sm ${className}`}
    >
      {(title || action) && (
        <header className="border-border flex items-center justify-between gap-3 border-b px-6 py-4">
          <div className="min-w-0">
            {title &&
              (typeof title === 'string' ? (
                <h2 className="text-foreground text-sm font-medium">{title}</h2>
              ) : (
                title
              ))}
            {description &&
              (typeof description === 'string' ? (
                <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
              ) : (
                description
              ))}
          </div>
          {action}
        </header>
      )}
      {children}
    </section>
  )
}

/** Standard inset for list rows / table bodies inside a {@link PanelSection}. */
export const PANEL_LIST_ROW_CLASS =
  'hover:bg-accent/50 focus-visible:bg-accent/50 w-full px-6 py-4 text-left transition-colors'
