import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';

const HeaderContainer = styled.header`
  background-color: #8C1D40;
  color: white;
  padding: 1rem;
`;

const Title = styled.h1`
  font-size: 1.5rem;
  text-align: right;
  margin: 0;
`;

const Nav = styled.nav`
  display: flex;
  justify-content: center;
  margin-top: 1rem;
`;

const NavItem = styled(motion.a)`
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: white;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
  }

  &:hover:after {
    transform: scaleX(1);
  }
`;

const Header: React.FC = () => {
  return (
    <HeaderContainer>
      <Title>Missoula Council of the Deaf, Inc</Title>
      <Nav>
        <NavItem href="/" whileHover={{ scale: 1.1 }}>Home</NavItem>
        <NavItem href="/meet-board" whileHover={{ scale: 1.1 }}>Meet MCDi Board</NavItem>
        <NavItem href="/MCD-Inc._AOI_Bylaws.pdf" whileHover={{ scale: 1.1 }}>Bylaws</NavItem>
        <NavItem href="/news" whileHover={{ scale: 1.1 }}>News</NavItem>
        <NavItem href="/calendar" whileHover={{ scale: 1.1 }}>Calendar</NavItem>
      </Nav>
    </HeaderContainer>
  );
};

export default Header;