'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  Database,
  FileText,
  Cookie,
  Clock,
  LayoutGrid,
} from 'lucide-react'

const EINWILLIGUNGEN_TABS = [
  {
    id: 'overview',
    label: 'Übersicht',
    href: '/sdk/einwilligungen',
    icon: LayoutGrid,
    description: 'Consent-Tracking Dashboard',
  },
  {
    id: 'catalog',
    label: 'Datenpunktkatalog',
    href: '/sdk/einwilligungen/catalog',
    icon: Database,
    description: '18 Kategorien, 128 Datenpunkte',
  },
  {
    id: 'privacy-policy',
    label: 'DSI Generator',
    href: '/sdk/einwilligungen/privacy-policy',
    icon: FileText,
    description: 'Datenschutzinformation erstellen',
  },
  {
    id: 'cookie-banner',
    label: 'Cookie-Banner',
    href: '/sdk/einwilligungen/cookie-banner',
    icon: Cookie,
    description: 'Cookie-Consent konfigurieren',
  },
  {
    id: 'retention',
    label: 'Löschmatrix',
    href: '/sdk/einwilligungen/retention',
    icon: Clock,
    description: 'Aufbewahrungsfristen verwalten',
  },
]

export function EinwilligungenNavTabs() {
  const pathname = usePathname()

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-2 mb-6">
      <div className="flex flex-wrap gap-2">
        {EINWILLIGUNGEN_TABS.map((tab) => {
          const Icon = tab.icon
          const isActive = pathname === tab.href

          return (
            <Link
              key={tab.id}
              href={tab.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
                isActive
                  ? 'bg-purple-100 text-purple-900 shadow-sm'
                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
              }`}
            >
              <Icon className={`w-5 h-5 ${isActive ? 'text-purple-600' : 'text-gray-400'}`} />
              <div>
                <div className={`font-medium text-sm ${isActive ? 'text-purple-900' : ''}`}>
                  {tab.label}
                </div>
                <div className="text-xs text-gray-500">{tab.description}</div>
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}