import { Card, CardContent, CardMedia, Typography } from '@material-ui/core';
import { User } from 'features/user/userSlice';
import React from 'react';
import styled from 'styled-components';

const StyledCard = styled(Card)`
  display: flex;
  width: 300px;
  height: 61px;
  border: none;
`;
const Details = styled.div`
  display: flex;
  flex-direction: column;
`;
const StyledCardContent = styled(CardContent)`
  flex: 1 0 auto;
  padding: ${({ theme }) => theme.spacing(1)}px;
`;
const StyledCardMedia = styled(CardMedia)`
  width: 51px;
  height: 51px;
`;

export default function renderUser(rowData: Omit<User, 'loading' | 'token'>) {
  return (
    <StyledCard variant="outlined">
      <StyledCardMedia
        image={rowData.profile.image.replace(/-o=.*$/, '-o=s50')}
        title="Profile Picture"
      />
      <Details>
        <StyledCardContent>
          <Typography component="h6" variant="subtitle2">
            {rowData.profile.name}
          </Typography>
          <Typography variant="caption" color="textSecondary">
            {rowData.profile.email}
          </Typography>
        </StyledCardContent>
      </Details>
    </StyledCard>
  );
}