Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Typography
} from '@mui/material'
import { ExpandMore, StarRateRounded } from '@mui/icons-material'

import Widget from '@components/UI/Widget'

export default function HabitItem({
  habit: {
    id,
    name,
    description,
    action = {
      frequency: 'Diariamente'
    },
    method = {
      type: 'video',
      content: 'https://example.com/ejercicio-diario.mp4'
    },
    goal = {
      amount: 30 // minutos de ejercicio diario
    }
  }
}) {
  return (
    <Widget>
      <Widget.Body>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            justifyContent: 'space-between'
          }}
        >
          <Typography variant='h3'>{name}</Typography>
          <Typography variant='overline'>
            <StarRateRounded />
            {goal.amount}
          </Typography>
        </Box>
        <Typography>{description}</Typography>
        <Typography variant='overline'>{action.frequency}</Typography>

        <Accordion
          sx={{
            display: method.content ? 'block' : 'none',
            backgroundColor: 'transparent',
            boxShadow: 'none',
            margin: '0 !important',
            '&::before': {
              height: 0
            }
          }}
        >
          <AccordionSummary
            expandIcon={<ExpandMore />}
            disableRipple
            sx={{
              minHeight: 'auto !important',
              padding: '0 1rem',
              '& .MuiAccordionSummary-content': {
                margin: '0 !important'
              }
            }}
          >
            <Typography variant='h3'>Método</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Widget.Media src={method.content} alt={name} />
          </AccordionDetails>
        </Accordion>
      </Widget.Body>
    </Widget>
  )
}