{"size": 2074, "ext": "js", "max_stars_repo_path": "components/Profile/Profile.js", "max_stars_repo_name": "hlongwane1806/profiles", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/Profile/Profile.js", "max_issues_repo_name": "hlongwane1806/profiles", "max_issues_repo_issues_event_min_datetime": "2020-07-20T05:01:46.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-13T07:01:43.000Z", "max_forks_repo_path": "components/Profile/Profile.js", "max_forks_repo_name": "hlongwane1806/profiles", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 12, "max_forks_count": null, "avg_line_length": 24.9879518072, "max_line_length": 107, "alphanum_fraction": 0.5988428158}
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { Link } from '../../routes';
import styled from 'styled-components';
const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    padding: 24,
    maxWidth: 400
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
    minWidth: 240,
  },
  content: {
    flex: '1 0 auto',
  },
  cover: {
    width: 151,
  },
 
  location:{
      display:'flex',
      flexDirection:'row',
      justifyContent:'start',
      alignItems:'start',
  },
  
 
}));
const Back = styled.a`
padding: 0.5rem 1rem;
color: inherit;
font-family:inherit;
font-size:inherit
font-weight:inherit;
 text-decoration:none;
`



const Profile = ({profile, seed, page})=>{
  const classes = useStyles();
  const theme = useTheme();

  return (
    <Card className={classes.root}>
      <div className={classes.details}>
        <CardContent className={classes.content}>
          <Typography component="h5" variant="h5">
            {`${profile.name.first} ${profile.name.last}`}
          </Typography>
          <Typography variant="subtitle1" color="textSecondary">
         <div className={classes.location}>
          {`${profile.location.city}, ${profile.location.state}`}
             </div>
          </Typography>
        </CardContent>
        <div >
          <Button variant="contained" color="primary" href="#contained-buttons">
                   <Link route='profile' params={{username: profile.login.username, seed:seed, page:page}}>
                  <Back> View Profile</Back>
              </Link>
          </Button>
        </div>
      </div>
      <CardMedia
        className={classes.cover}
        image={`${profile.picture.large}`}
        title="User profile picture"
      />
    </Card>
  );
}

export default Profile;

