import React from 'react'
import { Link, useLocation } from 'react-router-dom'

export interface TabItem {
  href: string
  label: string | React.ReactNode
}

interface TabsProps {
  items: TabItem[]
  className?: string
  activeClassName?: string
  inactiveClassName?: string
}

const Tabs = ({
  items,
  className = '',
  activeClassName = 'text-primary border-b-2 border-primary',
  inactiveClassName = 'text-base-content/70 hover:text-primary',
}: TabsProps) => {
  const pathname = useLocation()

  const isActive = (href: string) => {
    const currentPath = pathname.pathname
    // For root route, only exact match
    if (href === '/') {
      return currentPath === '/'
    }
    // For other routes, check if pathname starts with href (exact match or nested route)
    return currentPath === href || currentPath.startsWith(`${href}/`)
  }

  return (
    <div className={`flex flex-col sm:flex-row items-start md:items-start gap-1 lg:gap-2 ${className}`}>
      {' '}
      {items.map((item) => (
        <Link
          key={item.href}
          to={item.href}
          className={`px-3 py-2 text-sm font-medium transition-colors whitespace-nowrap ${isActive(item.href) ? activeClassName : inactiveClassName
            }`}
        >
          {item.label}
        </Link>
      ))}
    </div>
  )
}

export default Tabs