import { ReactNode } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Header } from './Header'
import { Trophy, Medal, Gift, Activity, LayoutDashboard } from 'lucide-react'

interface RewardsLayoutProps {
  children: ReactNode
  title?: string
  subtitle?: string
}

const NAV_ITEMS = [
  { path: '/rewards', label: 'Overview', icon: LayoutDashboard, exact: true },
  { path: '/rewards/leaderboard', label: 'Leaderboard', icon: Trophy },
  { path: '/rewards/achievements', label: 'Achievements', icon: Medal },
  { path: '/rewards/airdrops', label: 'Airdrops', icon: Gift },
  { path: '/rewards/activity', label: 'Activity', icon: Activity },
]

export function RewardsLayout({ children, title, subtitle }: RewardsLayoutProps) {
  const location = useLocation()

  const isActive = (path: string, exact?: boolean) => {
    if (exact) {
      return location.pathname === path
    }
    return location.pathname.startsWith(path)
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      <div className="px-4 sm:px-6 lg:px-8 py-6">
        {/* Page Header */}
        {title && (
          <div className="mb-6">
            <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
            {subtitle && <p className="text-gray-600 mt-1">{subtitle}</p>}
          </div>
        )}

        {/* Sub Navigation */}
        <div className="bg-white rounded-xl shadow-sm mb-6">
          <nav className="flex overflow-x-auto">
            {NAV_ITEMS.map((item) => {
              const Icon = item.icon
              const active = isActive(item.path, item.exact)

              return (
                <Link
                  key={item.path}
                  to={item.path}
                  className={`flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
                    active
                      ? 'border-primary text-primary'
                      : 'border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300'
                  }`}
                >
                  <Icon size={18} />
                  {item.label}
                </Link>
              )
            })}
          </nav>
        </div>

        {/* Content */}
        {children}
      </div>
    </div>
  )
}
