// src/components/Header/Header.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Header.css';

const Header = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const navigate = useNavigate();

  const handleProfileClick = () => {
    setIsDropdownOpen(!isDropdownOpen);
  };

  const handleViewProfile = () => {
    // Redireciona para uma página de perfil (Rota que adicionaremos no App.js)
    navigate('/perfil'); 
    setIsDropdownOpen(false);
  };

  const handleLogout = () => {
    // Ação de Logout: Exibe um alerta e redireciona para a tela de Login
    alert('Você foi desconectado. Executando ação de logout...');
    setIsDropdownOpen(false);
    navigate('/login'); 
  };

  const handleSupportClick = () => {
    // Funcionalidade de suporte (futuramente implementada em TelefoneSuporte)
    alert('Função de Suporte de Telefone em desenvolvimento.');
  };

  return (
    <div className="header-container">
      <div className="right-corner-elements">
        
        {/* Ícone de Telefone */}
        <div className="phone-icon-container" onClick={handleSupportClick}>
          <span className="phone-icon" role="img" aria-label="telefone">📞</span>
        </div>

        {/* Seção de Perfil com Dropdown */}
        <div className="profile-section">
          <div className="profile-picture-container" onClick={handleProfileClick}>
            {/* O div "profile-placeholder" simula a foto de perfil circular colorida */}
            <div className="profile-placeholder"></div> 
          </div>

          {isDropdownOpen && (
            <div className="profile-dropdown">
              <button onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
              <button onClick={handleLogout} className="dropdown-button logout-button">Sair (Logout)</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Header;