Proyectos de Subversion LeadersLinked - SPA

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

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 }}>
      <CardHeader
        avatar={<Avatar src={image} alt={name} />}
        title={`${first_name} ${last_name}`}
        subheader={date}
      />

      <CardContent>
        <Typography variant='body2'>Tipo: {type}</Typography>
        <Typography variant='body2'>Motivo: {reason}</Typography>
        <Typography variant='body2'>Estatus: {status}</Typography>
        <Typography variant='body2'>Email: {email}</Typography>
      </CardContent>

      <CardActions>
        <Button size='small' onClick={handleExpandClick}>
          Detalles
        </Button>
      </CardActions>

      <Collapse in={expanded} timeout='auto' unmountOnExit>
        <CardContent>
          <Typography paragraph>{commet}</Typography>
        </CardContent>
      </Collapse>
    </Card>
  )
}