Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState } from 'react'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Checkbox,
  IconButton,
  Menu,
  MenuItem,
  Typography
} from '@mui/material'
import {
  MoreVert,
  RadioButtonUnchecked,
  CheckCircle,
  ArrowDropDown
} from '@mui/icons-material'

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

export default function GoalCard({ goal }) {
  const [showAction, setShowActions] = useState(false)
  const actionsEl = useRef()

  const { title, description, habits } = goal

  const toggleActions = () => setShowActions(!showAction)

  return (
    <Widget>
      <Widget.Body>
        <Box
          sx={{
            display: 'flex',
            gap: 0.5
          }}
        >
          <Box>
            <Checkbox
              edge='start'
              icon={<RadioButtonUnchecked />}
              checkedIcon={<CheckCircle color='success' />}
              disableRipple
              sx={{ borderRadius: '50px' }}
            />
          </Box>
          <Box flexGrow='1'>
            <Typography variant='h2'>{title}</Typography>
            <Typography>{description}</Typography>

            <Accordion
              sx={{ backgroundColor: 'transparent', boxShadow: 'none' }}
            >
              <AccordionSummary
                expandIcon={<ArrowDropDown />}
                sx={{ padding: 1 }}
              >
                <Typography variant='h3'>Hábitos:</Typography>
              </AccordionSummary>
              <AccordionDetails sx={{ padding: 0 }}>
                <TagsList tags={habits} />
              </AccordionDetails>
            </Accordion>
          </Box>
          <Box>
            <IconButton
              id='goal-button'
              aria-controls={showAction ? 'goal-menu' : undefined}
              aria-haspopup='true'
              aria-expanded={showAction ? 'true' : undefined}
              onClick={toggleActions}
              ref={actionsEl}
            >
              <MoreVert />
            </IconButton>
            <Menu
              id='goal-menu'
              anchorEl={actionsEl.current}
              open={showAction}
              onClose={toggleActions}
              MenuListProps={{
                'aria-labelledby': 'goal-button'
              }}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left'
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left'
              }}
            >
              <MenuItem onClick={() => toggleActions()}>Agregar</MenuItem>
            </Menu>
          </Box>
        </Box>
      </Widget.Body>
    </Widget>
  )
}