'use client'
// src/components/ui/Tabs.tsx
// Input: tabs array, active tab id, onChange handler
// Output: horizontal tab bar with animated underline indicator
// Rationale: used in Analyses screen and anywhere multi-view navigation is needed

import { motion } from 'framer-motion'
import { cn } from '@/lib/utils'

export interface TabItem {
  id: string
  label: string
  icon?: React.ReactNode
}

export interface TabsProps {
  tabs: TabItem[]
  active: string
  onChange: (id: string) => void
  className?: string
}

export function Tabs({ tabs, active, onChange, className }: TabsProps) {
  return (
    <div className={cn('flex items-end gap-0 border-b border-bg-border', className)}>
      {tabs.map((tab) => {
        const isActive = tab.id === active
        return (
          <button
            key={tab.id}
            onClick={() => onChange(tab.id)}
            className={cn(
              'relative flex items-center gap-1.5 px-4 py-2.5 text-caption transition-colors duration-fast',
              isActive ? 'text-text-primary' : 'text-text-muted hover:text-text-secondary'
            )}
          >
            {tab.icon && <span className="flex-shrink-0">{tab.icon}</span>}
            <span>{tab.label}</span>
            {isActive && (
              <motion.span
                layoutId="tabs-underline"
                className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent"
                transition={{ duration: 0.15, ease: [0.65, 0, 0.35, 1] }}
              />
            )}
          </button>
        )
      })}
    </div>
  )
}