import React from "react";
import PropTypes from "prop-types";
import {
  ProfileMainInfoContainer,
  AvatarImageContainer,
  AvatarImage,
  ProfileMainInfoGrid,
  ProfileName,
  ProfilePIBContainer,
  PocketIcon,
  ProfilePIB,
} from "./ProfileMainInfo.styled";
import { useTranslation } from "react-i18next";

const ProfileMainInfo = (props) => {
  const { t } = useTranslation();
  return (
    <ProfileMainInfoContainer>
      <AvatarImageContainer>
        <AvatarImage
          alt={props.profile?.company?.name}
          src={props.profile?.image}
        />
      </AvatarImageContainer>
      <ProfileMainInfoGrid>
        <ProfileName isMyProfile={props.isMyProfile} variant="h5">
          {props.profile?.company?.name}
        </ProfileName>
        <ProfilePIBContainer>
          <PocketIcon />
          <ProfilePIB isMyProfile={props.isMyProfile} variant="subtitle2">
            {t("profile.PIB")} {props.profile?.company?.PIB}
          </ProfilePIB>
        </ProfilePIBContainer>
      </ProfileMainInfoGrid>
    </ProfileMainInfoContainer>
  );
};

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

export default ProfileMainInfo;
