import Box from '@mui/material/Box'
import SpeedDial from '@mui/material/SpeedDial'
import SpeedDialIcon from '@mui/material/SpeedDialIcon'
import SpeedDialAction from '@mui/material/SpeedDialAction'
import ArticleIcon from '@mui/icons-material/Article'
import TitleIcon from '@mui/icons-material/Title'

const actions = [
  {icon: <TitleIcon />, name: 'Créer un titre'},
  {icon: <ArticleIcon />, name: 'Créer un article'}
]

export default function Create() {
  return (
    <Box sx={{height: 18, transform: 'translateZ(0px)', flexGrow: 1}}>
      <SpeedDial
        FabProps={{color: 'success'}}
        direction='left'
        ariaLabel='Créer un titre ou un article'
        sx={{position: 'absolute', bottom: 18, right: 0}}
        icon={<SpeedDialIcon />}
      >
        {actions.map(action => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
          />
        ))}
      </SpeedDial>
    </Box>
  )
}