import { Box, Typography } from '@mui/material';

export default function PhoneDisplay({
  phones,
}: {
  phones: { phone: string; time: string }[];
}) {
  return (
    <Box sx={{ px: { xs: 2, sm: 4 } }}>
      {phones.map((item, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            py: 2,
            width: '100%',
          }}
        >
          <Typography variant="h6" color="text.primary">
            {item.phone}
          </Typography>
          <Typography variant="caption" color="text.secondary">
            {item.time}
          </Typography>
        </Box>
      ))}
    </Box>
  );
}