import { Box, Typography } from '@mui/material';
import { Icon } from '@rkheftan/harmony-ui';
import { Mobile } from 'iconsax-react';
import { type PhoneDisplayProps } from '@/features/profile/types/settingsType';

export default function PhoneDisplay({ phones }: PhoneDisplayProps) {
  return (
    <>
      {phones.map((item, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            py: 6,
            mx: 2,
            gap: 1,
          }}
        >
          <Box
            sx={{
              width: 40,
              height: 40,
              backgroundColor: 'primary.light',
              justifyContent: 'center',
              alignItems: 'center',
              display: 'flex',
              borderRadius: 0.5,
            }}
          >
            <Icon
              Component={Mobile}
              size="medium"
              variant="Bold"
              color="primary.main"
            />
          </Box>

          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <Typography variant="h6" color="text.primary">
              {item.phone}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              {item.time}
            </Typography>
          </Box>
        </Box>
      ))}
    </>
  );
}