import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import TextBase from "../text";
import Icons from "../icons";
import { useDevice } from "../../contexts/device";
import React from "react";
import styled from "styled-components";
const Wrapper = styled.div(({ isHide }) => `
  position: absolute;
  top: 88px;
  bottom: unset;
  left: 0;
  right: 0;
  background: #E8662D;
  height: 38px;
  z-index: 10;

  display: flex;
  align-items: center;

  transition: 0.3s;
  transform: translateY(${isHide ? "-40px" : "0"});


  @media (max-width: 1023px) {
    top: 47px;
    right: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: auto;
    min-height: 38px;
    max-width: 425px;
    margin: 0 auto;
    padding-right: 60px;

    + main {
      padding-top: 37px;
    }
  }
`);
const Inner = styled.a `
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 1096px;
  padding: 8px 0px 8px 0px;
  margin: 0 auto;

  text-decoration: none;

  @media (max-width: 1180px) {
    max-width: 870px;
  }

  @media (max-width: 1023px) {
    padding: 2px 10px;
  }
`;
const Close = styled.button `
  border: unset;
  background: unset;
  position: absolute;
  padding: 0;
  top: calc(50% - 9.5px);
  right: 20px;
  cursor: pointer;
  @media (max-width: 1023px) {
  }
`;
const NavBanner = (props) => {
    const [hide, setHide] = React.useState(false);
    const { screen } = useDevice();
    const isMobile = screen !== "large";
    const hideBanner = React.useCallback(() => {
        setHide(true);
        localStorage.setItem("genshiro-banner-lockdrop-hide", "true");
    }, []);
    const isHideBanner = !!localStorage.getItem("genshiro-banner-lockdrop-hide");
    const Content = isMobile ? TextBase.F2 : TextBase.T4;
    return isHideBanner ? null : (_jsxs(Wrapper, { isHide: hide, children: [_jsx(Inner, { href: props.url, children: _jsx(Content, { as: "span", fontFamily: "Heavy", color: "white", lineHeight: isMobile ? 14 : 18, children: props.content }) }), _jsx(Close, { onClick: hideBanner, children: _jsx(Icons.Cross, { color: "white" }) })] }));
};
export default NavBanner;
//# sourceMappingURL=banner.js.map