import React from "react";
import Paper from "@material-ui/core/Paper";
import { useStyles } from "./ApplicantProfile.styles";
import Grid from "@material-ui/core/Grid";
import { useSelector } from "react-redux";

const BioCard = ({ profileDetails }) => {
  const classes = useStyles();
  const userType = useSelector((state) => state.login.usertype);

  return (
    <>  
      <Grid className={classes.biosection}>
        {!profileDetails.org_name || profileDetails.org_name === "" ? (
          <h1>
            {profileDetails.first_name} {profileDetails.last_name}{" "}
          </h1>
        ) : (
          <h1>{profileDetails.org_name}</h1>
        )}
        {userType === "applicant" && (
          <h2>Sector: {profileDetails.sector}</h2>
        )}
      </Grid>
      <Paper className={classes.profilepaper}>
        <p>{profileDetails.bio}</p>
      </Paper>
    </>
  );
};

export default BioCard;