import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from './utils'

export interface SectionPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
  title: string
  icon?: ReactNode
  variant?: 'glass' | 'default'
  headerRight?: ReactNode
  children: ReactNode
}

const SectionPanel = forwardRef<HTMLDivElement, SectionPanelProps>(
  ({ title, icon, variant = 'glass', headerRight, className, children, ...props }, ref) => {
    const isGlass = variant === 'glass'
    return (
      <div
        ref={ref}
        className={cn(
          'rounded-xl border',
          isGlass
            ? 'border-border-glass bg-glass'
            : 'border-border bg-card text-card-foreground shadow-sm',
          className
        )}
        {...props}
      >
        <div className="flex items-center gap-3 border-b border-inherit px-4 py-3">
          {icon && (
            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-foreground/[0.06] text-foreground-secondary [&>svg]:size-4">
              {icon}
            </div>
          )}
          <h3 className="text-foreground text-sm font-semibold">{title}</h3>
          {headerRight && <div className="ml-auto">{headerRight}</div>}
        </div>
        <div className="p-4">{children}</div>
      </div>
    )
  }
)
SectionPanel.displayName = 'SectionPanel'
export { SectionPanel }
