import React from "react";
import PropTypes from "prop-types";
import {
  ProfileContactContainer,
  LocationIcon,
  ContactItem,
  MailIcon,
  GlobeIcon,
} from "./ProfileContact.styled";
import { Stack } from "@mui/material";

const ProfileContact = (props) => {
  return (
    <ProfileContactContainer
      container
      direction={{ xs: "column", sm: "row" }}
      justifyContent={{ xs: "center", sm: "start" }}
      alignItems={{ xs: "start", sm: "center" }}
    >
      <Stack direction="row">
        <LocationIcon isMyProfile={props.isMyProfile} />
        <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
          {props.profile?.company?.contacts?.location}
        </ContactItem>
      </Stack>
      <Stack direction="row">
        <MailIcon isMyProfile={props.isMyProfile} />
        <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
          {props.profile?.email}
        </ContactItem>
      </Stack>
      <Stack direction="row">
        <GlobeIcon isMyProfile={props.isMyProfile} />
        <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
          {props.profile?.company?.contacts?.web}
        </ContactItem>
      </Stack>
    </ProfileContactContainer>
  );
};

ProfileContact.propTypes = {
  profile: PropTypes.object,
  isMyProfile: PropTypes.bool,
  children: PropTypes.node,
};

export default ProfileContact;
