import { BottomNavigation, Box, TextField } from "@mui/material";
import styled from "styled-components";

export const StyledBottomNavigation = styled((props) => (
  <BottomNavigation {...props} />
))`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #dfdfdf;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
`;

export const NavWrapperBox = styled((props) => <Box {...props} />)`
  width: 70%;
  max-width: 1000px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

export const BrandImage = styled((props) => (
  <Box
    component="img"
    alt="logo"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/800px-Instagram_logo.svg.png"
    {...props}
  />
))`
  height: 40px;
  cursor: pointer;
  margin-top: 5px;
`;

export const SearchBox = styled((props) => (
  <TextField {...props} placeholder="search..." />
))`
  background: white;
  & label.Mui-focused {
    color: white;
  }
  & .MuiInput-underline:after {
    border-bottom-color: white;
  }
  & .MuiOutlinedInput-root {
    & fieldset {
      border-color: black;
    }
    &.Mui-focused fieldset {
      border-color: black;
    }
    & input {
      padding: 5px;
    }
  }
`;

export const NavItemsBox = styled(Box)`
  position: relative;
  height: 22px;
`;

export const Icon = styled((props) => (
  <Box component="img" {...props} alt="icon-profile" src={props.src} />
))`
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin: 0 10px;
  display: inline-block;
`;
