import React from 'react';
import { NavLink } from 'react-router-dom';
import { FileText, Edit, List, Bookmark } from 'lucide-react';
import '../styles/components/header.css';

const Header = () => {
  return (
    <header className="app-header">
      <div className="logo-container">
        <h1>BlogMaster</h1>
        <p className="tagline">Kreator treści blogowych</p>
      </div>
      
      <nav className="main-nav">
        <NavLink 
          to="/" 
          className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
          end
        >
          <Edit size={18} />
          <span>Wybór tematu</span>
        </NavLink>
        
        <NavLink 
          to="/plan" 
          className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
        >
          <List size={18} />
          <span>Plan bloga</span>
        </NavLink>
        
        <NavLink 
          to="/content" 
          className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
        >
          <FileText size={18} />
          <span>Treść bloga</span>
        </NavLink>
        
        <NavLink 
          to="/saved" 
          className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
        >
          <Bookmark size={18} />
          <span>Zapisane tematy</span>
        </NavLink>
      </nav>
    </header>
  );
};

export default Header;