import React from 'react';
import styled, { css } from 'styled-components';
import { FaAirbnb } from 'react-icons/fa';

const StLogoLink = styled.a`
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  text-decoration: none;
  ${({ isScrollTop }) =>
    isScrollTop
      ? css`
          color: ${({ theme }) => theme.color.white};
        `
      : css`
          color: ${({ theme }) => theme.color.main};
        `}

  & svg {
    width: 35px;
    height: 35px;
    margin-right: 5px;
  }
`;

const StLogoTitle = styled.h1`
  @media ${({ theme }) => theme.size.iPad} {
    display: none;
  }
  ${({ isScrollTop }) =>
    isScrollTop
      ? css`
          color: ${({ theme }) => theme.color.white};
        `
      : css`
          color: ${({ theme }) => theme.color.main};
        `};
  font-size: 25px;
  font-weight: bold;
`;

const Logo = ({ isScrollTop, handleLogoClick }) => {
  return (
    <StLogoLink
      href="/"
      isScrollTop={isScrollTop}
      onClick={e => handleLogoClick(e)}
    >
      <FaAirbnb />
      <StLogoTitle isScrollTop={isScrollTop}>airdnd</StLogoTitle>
    </StLogoLink>
  );
};

export default React.memo(Logo);