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

export default function SocialMediaList({ emailList }: SocialMediaListProps) {
  return (
    <Box sx={{ width: '100%', borderRadius: 1, p: { xs: 1, sm: 2 } }}>
      {emailList.map((item, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            py: 1,
            gap: 1,
          }}
        >
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              minWidth: 0,
            }}
          >
            <Box
              sx={{
                backgroundColor: 'primary.light',
                width: 40,
                height: 40,
                alignItems: 'center',
                justifyContent: 'center',
                display: 'flex',
                borderRadius: 0.5,
              }}
            >
              {item.provider === 'google' && (
                <Icon
                  Component={Google}
                  size="medium"
                  color="primary.main"
                  variant="Bold"
                />
              )}
              {item.provider === 'email' && (
                <Icon
                  Component={Sms}
                  size="medium"
                  variant="Bold"
                  color="primary.main"
                />
              )}
            </Box>

            <Box sx={{ minWidth: 0 }}>
              <Typography variant="h6" noWrap>
                {item.email}
              </Typography>
              <Typography variant="caption" color="text.secondary">
                {item.time}
              </Typography>
            </Box>
          </Box>
        </Box>
      ))}
    </Box>
  );
}
