Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import {
  Avatar,
  Button,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Collapse,
  Typography
} from '@mui/material'

export default function ReportCard({ report }) {
  const {
    first_name = '',
    last_name = '',
    email = '',
    image = '',
    status = '',
    reason = '',
    type = '',
    commet = '',
    review = null,
    date = ''
  } = report
  const [expanded, setExpanded] = useState(false)

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

  return (
    <Card sx={{ maxWidth: 345, margin: '0 auto' }}>
      <CardHeader
        avatar={<Avatar src={image} alt={name} />}
        title={`${first_name} ${last_name}`}
        subheader={date}
        sx={{ p: 1 }}
      />

      <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
        <Typography paragraph>
          <Typography variant='overline'>Tipo: </Typography>
          {type}
        </Typography>
        <Typography paragraph>
          <Typography variant='overline'>Motivo: </Typography>
          {reason}
        </Typography>
        <Typography paragraph>
          <Typography variant='overline'>Estatus: </Typography>
          {status}
        </Typography>
        <Typography paragraph>
          <Typography variant='overline'>Email: </Typography>
          {email}
        </Typography>
      </CardContent>

      <CardActions sx={{ p: 1 }}>
        <Button variant='tertiary' size='small' onClick={handleExpandClick}>
          Detalles
        </Button>
      </CardActions>

      <Collapse in={expanded} timeout='auto' unmountOnExit>
        <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
          <Typography variant='overline'>Comentario:</Typography>
          <Typography paragraph>{commet}</Typography>
          {review && (
            <>
              <Typography variant='overline'>Revisión:</Typography>
              <Typography paragraph>{review}</Typography>
            </>
          )}
        </CardContent>
      </Collapse>
    </Card>
  )
}