import { Box } from '@mui/material'
import { useCustomTheme } from '@/themes/useCustomTheme'

type PinkTextBoxProps = {
  text: string;
  index: number;
}

const PinkTextBox = ({ text, index }: PinkTextBoxProps) => {
  const theme = useCustomTheme();
  return (
    <Box 
      key={index}
      sx={{
        border: `4px solid ${theme.customProperties.primaryPink}`,
        textAlign: 'center',
        padding: '8px',
        width: '75px',
        height: '75px'
      }}
    >
      {text}
    </Box>
  )
}

export default PinkTextBox