'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Settings, Sparkles, Palette, User, Database, Info, Check } from 'lucide-react'
import { cn } from '@/lib/utils'

interface SettingsSection {
  id: string
  label: string
  icon: React.ReactNode
  href: string
}

interface SettingsNavProps {
  className?: string
}

export function SettingsNav({ className }: SettingsNavProps) {
  const pathname = usePathname()

  const sections: SettingsSection[] = [
    {
      id: 'general',
      label: 'General',
      icon: <Settings className="h-5 w-5" />,
      href: '/settings/general'
    },
    {
      id: 'ai',
      label: 'AI',
      icon: <Sparkles className="h-5 w-5" />,
      href: '/settings/ai'
    },
    {
      id: 'appearance',
      label: 'Appearance',
      icon: <Palette className="h-5 w-5" />,
      href: '/settings/appearance'
    },
    {
      id: 'profile',
      label: 'Profile',
      icon: <User className="h-5 w-5" />,
      href: '/settings/profile'
    },
    {
      id: 'data',
      label: 'Data',
      icon: <Database className="h-5 w-5" />,
      href: '/settings/data'
    },
    {
      id: 'about',
      label: 'About',
      icon: <Info className="h-5 w-5" />,
      href: '/settings/about'
    }
  ]

  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')

  return (
    <nav className={cn('space-y-1', className)}>
      {sections.map((section) => (
        <Link
          key={section.id}
          href={section.href}
          className={cn(
            'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors',
            'hover:bg-gray-100 dark:hover:bg-gray-800',
            isActive(section.href)
              ? 'bg-gray-100 dark:bg-gray-800 text-primary'
              : 'text-gray-700 dark:text-gray-300'
          )}
        >
          {isActive(section.href) && (
            <Check className="h-4 w-4 text-primary" />
          )}
          {!isActive(section.href) && (
            <div className="w-4" />
          )}
          {section.icon}
          <span className="font-medium">{section.label}</span>
        </Link>
      ))}
    </nav>
  )
}