'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { User, Share2 } from 'lucide-react'

export default function SettingsLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  const tabs = [
    { name: 'User Management', href: '/settings/users', icon: User },
    { name: 'Integrations & Share', href: '/settings/integrations', icon: Share2 },
  ]

  return (
    <div className="animate-in fade-in space-y-6 pb-12 duration-500">
      {/* Settings Navigation Tabs */}
      <div className="flex flex-col items-start gap-4 overflow-x-auto rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
        <div className="flex w-full items-center rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
          {tabs.map((tab) => {
            const isActive = pathname === tab.href
            const Icon = tab.icon
            return (
              <Link
                key={tab.href}
                href={tab.href}
                className={cn(
                  'flex items-center gap-2 rounded-lg px-4 py-2 whitespace-nowrap transition-all duration-200',
                  isActive
                    ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-blue-400'
                    : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
                )}
              >
                <Icon className="h-4 w-4" />
                {tab.name}
              </Link>
            )
          })}
        </div>
      </div>

      {/* Settings Content */}
      <div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        {children}
      </div>
    </div>
  )
}