import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Home, Newspaper, Mic, MessageSquare, Briefcase, User, Mail } from 'lucide-react'
import './BottomDock.css'

export default function BottomDock() {
  const location = useLocation()

  const items = [
    { label: 'Home', path: '/', icon: <Home size={20} /> },
    { label: 'Kniepunkt', path: '/kniepunkt', icon: <Newspaper size={20} /> },
    { label: 'Podcast', path: '/podcast', icon: <Mic size={20} /> },
    { label: 'Speaking', path: '/speaking', icon: <MessageSquare size={20} /> },
    { label: 'Beratung', path: '/consulting', icon: <Briefcase size={20} /> },
    { label: 'Über mich', path: '/ueber-mich', icon: <User size={20} /> },
    { label: 'Kontakt', path: '/kontakt', icon: <Mail size={20} /> },
  ]

  return (
    <div className="dock-container">
      <nav className="dock">
        {items.map((item) => {
          const isActive = location.pathname === item.path
          return (
            <div className="dock-item-wrapper" key={item.path}>
              <span className="dock-tooltip">{item.label}</span>
              <Link to={item.path} className={`dock-item ${isActive ? 'active' : ''}`}>
                {item.icon}
              </Link>
            </div>
          )
        })}
      </nav>
    </div>
  )
}