import React from 'react';
import { FaEnvelope, FaMapMarkerAlt, FaGithub, FaLinkedinIn, FaMoon, FaSun } from 'react-icons/fa';
import about from '../data/about';

const Header = ({ toggleTheme, theme }) => {
  return (
    <header className="bg-primary text-white">
      <div className="container mx-auto px-4 py-16">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold">{about.name}</h1>
            <p className="mt-2 text-xl">{about.title}</p>
          </div>
          <div className="flex flex-col gap-2 mt-4 md:mt-0">
            <div className="flex items-center">
              <FaEnvelope className="mr-2" />
              <a href={`mailto:${about.email}`} className="hover:underline">
                {about.email}
              </a>
            </div>
            <div className="flex items-center">
              <FaMapMarkerAlt className="mr-2" />
              <span>{about.location}</span>
            </div>
            <div className="flex items-center">
              <FaGithub className="mr-2" />
              <a href={`https://github.com/${about.github}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
                {about.github}
              </a>
            </div>
            <div className="flex items-center">
              <FaLinkedinIn className="mr-2" />
              <a href={`https://www.linkedin.com/in/${about.linkedin}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
                {about.linkedin}
              </a>
            </div>
          </div>
          <button
            onClick={toggleTheme}
            className="fixed top-4 right-4 z-50 p-2 bg-secondary text-white rounded-full"
            aria-label="Toggle theme"
          >
            {theme === 'light' ? <FaMoon /> : <FaSun />}
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;