// components
import styled from "styled-components";
import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo";
import Item from "components/footer/Item";

const Header = ({
  onNavToggle,
  onOptionToggle,
  onLearningToggle,
  title,
}: Props) => {
  return (
    <Wrapper>
      <Layout>
        <AutoLayout style={{ backgroundColor: "#009AA8" }}>
          <nav style={{ display: "flex", marginLeft: "16px" }}>
            <Img
              src="/react-epub-viewer/images/Setting.svg"
              onClick={onOptionToggle as any}
              alt="Logo"
            />
            <Img
              src="/react-epub-viewer/images/Edit.svg"
              alt="Logo"
              onClick={onLearningToggle as any}
            />
          </nav>
          <nav>
            <Button>خرید کتاب</Button>
          </nav>
          <nav
            style={{
              display: "flex",
              marginRight: "16px",
              alignItems: "center",
            }}
          >
            <Item text={title as any} />
            <span style={{ color: "#fff", marginRight: "10px" }}>||</span>
            <p style={{ margin: "0", color: "#fff" }}>نام کتاب </p>
            <Logo />
            <Img
              src="/react-epub-viewer/images/menu.svg"
              onClick={onNavToggle as any}
              alt="Logo"
            />
          </nav>
          {/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */}
          {/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} />
            <ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */}
        </AutoLayout>
      </Layout>
    </Wrapper>
  );
};

const Button = styled.button`
  display: flex;
  margin-top: 11px;
  border-radius: 5px;
  border: solid 2px #fff;
  padding: 3px 2rem;
  color: #fff;
  font-family: inherit;
`;

const Img = styled.img`
  width: 25px;

`;
interface Props {
  title: String;
  onNavToggle: (value?: boolean) => void;
  onOptionToggle: (value?: boolean) => void;
  onLearningToggle: (value?: boolean) => void;
  // setsettingicon: (value?: boolean) => void;
}

export default Header;
