import { Box, Stack, styled } from '@mui/material'
import { DeleteButton } from '../../IconButtons'

export const StyledBox = styled(Box)({
  display: 'flex',
  justifyContent: 'flex-end',
})

export const StyledBoxContainer = styled(Box)({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  margin: '10px 5px',
})

export const StyledBoxCard = styled(Box)({
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
  gap: '1rem',
})

export const StyledAvatar = styled(Box)({
  width: '100px',
  height: '100px',
  borderRadius: '10px',
  border: '1px solid #E5E5E5',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#E5E5E5',
})

export const StyledTextContainer = styled(Box)({
  marginTop: '8px',
  marginLeft: '20px',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
})

export const StyledDeleteButton = styled(DeleteButton)({
  border: '1px solid #0000001A',
  borderRadius: '10px',
  width: '50px',
  height: '50px',
})

export const StyledStack = styled(Stack)({
  alignItems: 'flex-end',
  justifyContent: 'space-between',
})

export const StyledGrid = styled(Stack)({
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(120px, max-content))',
  gap: '10px',
  marginTop: '10px',
})
