import React from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import { ProfileMenu } from './ProfileMenu';

export function Header() {
  const { user } = useAuth();

  return (
    <header className="bg-white border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Link to="/" className="flex items-center gap-2">
            <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
            <span className="font-semibold text-gray-900">Leiturama</span>
          </Link>

          <div className="flex items-center gap-4">
            {user ? (
              <ProfileMenu />
            ) : (
              <>
                <Link
                  to="/login/school"
                  className="text-gray-600 hover:text-gray-900"
                >
                  Entrar
                </Link>
                <Link
                  to="/register/school"
                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
                >
                  Cadastrar Escola
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}