import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import type { Page } from '../../common/types/component.types';

interface NavigationHeaderProps {
  pages: Page[];
}

export const NavigationHeader: React.FC<NavigationHeaderProps> = ({ pages }) => {
  const location = useLocation();

  return (
    <nav
      style={{
        backgroundColor: '#fff',
        borderBottom: '1px solid #ddd',
        padding: '12px 24px',
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '16px',
          alignItems: 'center',
        }}
      >
        {pages.map((page) => {
          const isActive = location.pathname === page.route;
          return (
            <Link
              key={page.id}
              to={page.route}
              style={{
                padding: '8px 16px',
                textDecoration: 'none',
                color: isActive ? '#007bff' : '#333',
                backgroundColor: isActive ? '#e3f2fd' : 'transparent',
                borderRadius: '4px',
                fontWeight: isActive ? '600' : '400',
                fontSize: '14px',
                border: isActive ? '1px solid #007bff' : '1px solid transparent',
                transition: 'all 0.2s',
              }}
            >
              {page.name}
            </Link>
          );
        })}
      </div>
    </nav>
  );
};