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

export function Navigation(): JSX.Element {
  const location = useLocation();

  const navItems = [
    {path: '/dashboard', label: 'Dashboard'},
    {path: '/channels', label: 'Channels'}
  ];

  return (
    <nav
      style={{
        background: '#f8f9fa',
        padding: '1rem',
        borderBottom: '1px solid #dee2e6',
        marginBottom: '2rem'
      }}>
      <div
        style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'flex',
          gap: '1rem'
        }}>
        {navItems.map(item => (
          <Link
            key={item.path}
            to={item.path}
            style={{
              padding: '0.5rem 1rem',
              textDecoration: 'none',
              color: location.pathname === item.path ? '#007bff' : '#6c757d',
              background: location.pathname === item.path ? '#e7f3ff' : 'transparent',
              borderRadius: '4px',
              border: location.pathname === item.path ? '1px solid #007bff' : '1px solid transparent'
            }}>
            {item.label}
          </Link>
        ))}
      </div>
    </nav>
  );
}
