import Box from '@mui/material/Box';

const row = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
};

const labelColumn = {
  fontWeight: 'bold',
  width: '25%',
};

const valueColumn = {
  width: '75%',
};

const cardTitle = {
  fontWeight: 'bold',
  fontSize: '1.2rem',
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
};

export default function AdminQueueItemCard({ queue_data }) {
  return (
    <Box
      sx={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        margin: '1rem 0',
      }}
    >
      <Box
        sx={{
          width: '90vw',
          border: '1px solid gray',
          borderRadius: '1rem',
          display: 'flex',
          flexDirection: 'column',
          padding: '1rem',
        }}
      >
        <Box sx={cardTitle}>{`non-urgent-case ${queue_data.id}`}</Box>
        <Box sx={{ display: 'flex', flexDirection: 'column', padding: '1rem 1rem' }}>
          <Box sx={row}>
            <Box sx={labelColumn}>Name</Box>
            <Box sx={valueColumn}>{queue_data.name || ''}</Box>
          </Box>
          <Box sx={row}>
            <Box sx={labelColumn}>HKID</Box>
            <Box sx={valueColumn}>{queue_data.hkid || '-'}</Box>
          </Box>
          <Box sx={row}>
            <Box sx={labelColumn}>Mobile</Box>
            <Box sx={valueColumn}>{queue_data.mobile || '-'}</Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}