{"size": 2609, "ext": "js", "max_stars_repo_path": "src/components/_customers/CustomerCard.js", "max_stars_repo_name": "NathanAlmazan/Droidcut", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/_customers/CustomerCard.js", "max_issues_repo_name": "NathanAlmazan/Droidcut", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/_customers/CustomerCard.js", "max_forks_repo_name": "NathanAlmazan/Droidcut", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 36.2361111111, "max_line_length": 126, "alphanum_fraction": 0.540436949}
import React from 'react';
import { capitalCase } from 'change-case';
import { Box, Typography } from '@mui/material';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import { red } from '@mui/material/colors';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const ExpandMore = styled((props) => {
    const { expand, ...other } = props;
    return <IconButton {...other} />;
  })(({ theme, expand }) => ({
    transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
}));

function CustomerCard({ customer }) {
    const [expanded, setExpanded] = React.useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    return (
        <Card sx={{ maxWidth: '90%' }}>
            <CardHeader
                avatar={
                <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
                    {capitalCase(customer.user[0])}
                </Avatar>
                }
                title={capitalCase(customer.user)}
                subheader={customer.email}
            />
            <CardActions disableSpacing>
                <Typography variant="body2">Expand to read {capitalCase(customer.user.split(' ')[0])}'s feedbacks</Typography>
                <ExpandMore
                    expand={expanded}
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label="show more"
                    >
                    <ExpandMoreIcon />
                </ExpandMore>
            </CardActions>
            <Collapse in={expanded} timeout="auto" unmountOnExit>
                <CardContent>
                    {customer.feedbacks.map((feedback, index) =>
                        <Box key={index}>
                            <Typography paragraph><strong>Feedback</strong></Typography>
                            <Typography paragraph>
                                {feedback.message}
                            </Typography>
                        </Box>    
                    )}
                </CardContent>
            </Collapse>
        </Card>
    )
}

export default CustomerCard
