import styled from "styled-components";
import { Grid, Typography } from "@mui/material";
import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
import { ReactComponent as Mail } from "../../../assets/images/svg/mail.svg";
import { ReactComponent as Globe } from "../../../assets/images/svg/globe.svg";
import selectedTheme from "../../../themes";

export const ProfileContactContainer = styled(Grid)`
  padding-top: 2rem;
  padding-bottom: 2rem;
  @media (max-width: 600px) {
    padding-bottom: 1rem;
  }
`;
export const LocationIcon = styled(Location)`
  height: 22px;
  width: 22px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.iconMineProfileColor
        : selectedTheme.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;
export const ContactItem = styled(Typography)`
  margin-right: 2rem;
  margin-left: 0.4rem;
  color: ${(props) =>
    props.isMyProfile ? "white" : selectedTheme.primaryDarkText};
  display: unset;
  font-family: "Open Sans";
  letter-spacing: 0.02em;
  font-size: 16px;
  position: relative;
  bottom: 1px;
  @media (max-width: 600px) {
    font-size: 14px;
    bottom: 4px;
  }
`;
export const MailIcon = styled(Mail)`
  height: 24px;
  width: 24px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.iconMineProfileColor
        : selectedTheme.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;
export const GlobeIcon = styled(Globe)`
  height: 22px;
  width: 22px;
  & path {
    stroke: ${(props) =>
      props.isMyProfile
        ? selectedTheme.iconMineProfileColor
        : selectedTheme.iconProfileColor};
  }
  @media (max-width: 600px) {
    width: 14px;
    height: 14px;
  }
`;
