Proyectos de Subversion LeadersLinked - SPA

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

import { HabitsContext } from '@app/contexts/habits'

import Widget from '@app/components/UI/Widget'

export default function Habits() {
  const { habits, toggleModal } = useContext(HabitsContext)

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 2,
          marginBottom: 1,
          paddingX: 1
        }}
      >
        <Typography variant='h1'>Habitos</Typography>

        <Button onClick={toggleModal}>
          <Add />
          Agregar
        </Button>
      </Box>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {habits.map(
          ({
            id,
            name,
            description,
            action = {
              frequency: 'Diariamente'
            },
            method = {
              type: 'video',
              content: 'https://example.com/ejercicio-diario.mp4'
            },
            goal = {
              amount: 30 // minutos de ejercicio diario
            }
          }) => (
            <Widget key={id}>
              <Widget.Body>
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                    justifyContent: 'space-between'
                  }}
                >
                  <Typography variant='h3'>{name}</Typography>
                  <Typography variant='body2'>
                    <StarRateRounded />
                    {goal.amount}
                  </Typography>
                </Box>
                <Typography>{description}</Typography>
                <Typography variant='body2'>{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>
          )
        )}
      </Box>
    </>
  )
}