import React from 'react'
import { NavLink } from 'react-router-dom'

export const NavBar: React.FC = () => {
  return (
    <nav className="h-12 flex-shrink-0 bg-white border-b border-gray-200 px-4 flex items-center">
      <div className="flex gap-6">
        <NavLink
          to="/"
          className={({ isActive }) =>
            `text-sm font-medium transition-colors ${
              isActive
                ? 'text-gray-900 border-b-2 border-gray-900'
                : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
            }`
          }
        >
          LTT
        </NavLink>
        <NavLink
          to="/rag-database"
          className={({ isActive }) =>
            `text-sm font-medium transition-colors ${
              isActive
                ? 'text-gray-900 border-b-2 border-gray-900'
                : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
            }`
          }
        >
          RAG Database
        </NavLink>
      </div>
    </nav>
  )
}
