'use client'

import { ReactNode } from 'react'
import { cn } from '@/lib/utils'
import { getPhosphorIcon } from '@/lib/utils/icons'

interface SidebarSectionProps {
  title: string
  children: ReactNode
  className?: string
  /** Phosphor icon name (e.g., "rocket", "book-open", "sliders") */
  icon?: string
}

/**
 * Sidebar Section component - groups items under a title with optional icon
 */
export function SidebarSection({ title, children, className = '', icon }: SidebarSectionProps) {
  const IconComponent = getPhosphorIcon(icon)
  
  return (
    <div className={cn('docs-sidebar-section flex flex-col', className)}>
      {/* Section title with optional icon */}
      <div className="docs-sidebar-section-header flex items-center gap-2 px-4 py-3">
        {IconComponent && (
          <IconComponent className="docs-sidebar-section-icon h-4 w-4 text-sidebar-foreground/70" weight="regular" />
        )}
        <span className="docs-sidebar-section-title text-sm font-semibold text-sidebar-foreground">
          {title}
        </span>
      </div>
      {/* Section items */}
      <ul className="docs-sidebar-section-items flex flex-col gap-0.5 px-2 pb-4">
        {children}
      </ul>
    </div>
  )
}
