'use client'

import * as React from 'react'

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

export interface SettingsNavProps {
  items: SettingsNavItem[]
  activeId?: string
  onNavigate: (href: string) => void
}

export function SettingsNav({ items, activeId, onNavigate }: SettingsNavProps) {
  return (
    <nav className="flex flex-col gap-1">
      {items.map((item) => {
        const isActive = item.id === activeId
        const Icon = item.icon

        return (
          <button
            key={item.id}
            onClick={() => onNavigate(item.href)}
            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left ${
              isActive
                ? 'bg-gray-100 text-gray-900'
                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
            }`}
          >
            {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
            {item.label}
          </button>
        )
      })}
    </nav>
  )
}