import { Box, MenuItem, Typography } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";
import { IconButton } from "../../Buttons/IconButton/IconButton";
import Option from "../../Select/Option/Option";
import Select from "../../Select/Select";
import { ReactComponent as Refresh } from "../../../assets/images/svg/refresh.svg";

export const HeaderContainer = styled(Box)`
  margin-top: 20px;
  display: ${props => props.skeleton ? "none" : "flex"};
  justify-content: space-between;
  align-items: center;
`;
export const HeaderLocation = styled(Box)`
  font-family: "Open Sans";
  color: ${selectedTheme.primaryPurple};
  font-weight: 700;
  line-height: 22px;
  font-size: 16px;
  flex: 2;
  max-width: ${(props) => (props.initial ? "fit-content" : "50%")};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:after {
    content: ${(props) => (props.initial ? `":"` : `""`)};
    @media (max-width: 600px) {
      content: "";
    }
  }
  @media (max-width: 600px) {
    font-size: 14px;
    padding-top: 3px;
  }
`;
export const HeaderButton = styled(IconButton)`
  padding: 2px 10px;
  @media (max-width: 1500px) {
    display: none;
  }
`;
export const HeaderOptions = styled(Box)`
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: end;
`;
export const HeaderSelect = styled(Select)`
  width: 210px;
  height: 35px;
  font-family: "Open Sans";
  margin-top: 3px;
  font-weight: 400;
  position: relative;
  left: -5px;
  & div:first-child {
    padding-left: 8px;
  }

  @media (max-width: 650px) {
    width: 144px;
    height: 30px;
    font-size: 14px;
  }
`;
export const SelectItem = styled(MenuItem)`
  font-family: "Open Sans";
`;
export const SelectOption = styled(Option)`
  @media (max-width: 600px) {
    height: 20px !important;
    min-height: 35px;
    margin: 2px;
  }
`;
export const IconStyled = styled(Box)`
  position: relative;
  top: 0;
  right: 10px;
`;
export const HeaderButtons = styled(Box)`
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin-right: 40px;
`;
export const HeaderAltLocation = styled(Typography)`
  font-family: "Open Sans";
  font-size: 16px;
  color: ${selectedTheme.primaryText};
  margin-left: 5px;
  @media (max-width: 600px) {
    display: none;
  }
`;
export const RefreshIcon = styled(Refresh)`
  width: 18px;
  height: 18px;
  position: relative;
  top: 3px;
  left: -5px;
  & path {
    stroke: ${selectedTheme.primaryDarkTextThird};
  }
`;
export const MySwapsTitle = styled(Typography)`
  font-family: "Open Sans";
  font-size: 16px;
  color: ${selectedTheme.primaryDarkTextThird};
  position: relative;
  left: 9px;
`;
