Account/src/features/profile/components/SocialMedia.tsx

import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
import {
  Box,
  Button,
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  TextField,
} from '@mui/material';
import { useState } from 'react';

export function SocialMedia() {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const emailList = [
    { email: 'emailtemp@email.com', provider: 'email' },
    { email: 'emailtemp@gmail.com', provider: 'google' },
  ];

  return (
    <div
      style={{
        backgroundColor: '#F5F5F5',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Box
        sx={{
          width: '600px',
          backgroundColor: 'white',
          boxShadow: 2,
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: '#F5F5F5',
            p: 2,
            borderRadius: 1,
          }}
        >
          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <Typography variant="h6">ایمیل و شبکه‌های اجتماعی من</Typography>
            <Typography sx={{ color: 'gray' }} variant="subtitle2">
              این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی
              می‌ماند
            </Typography>
          </Box>
          <Button
            onClick={handleOpen}
            sx={{
              border: 0.5,
              borderColor: '#1976d2',
              borderRadius: '5px',
              backgroundColor: 'white',
              color: '#1976d2',
              width: '150px',
              height: '30px',
            }}
          >
            افزودن ایمیل / سوشال
          </Button>
        </Box>

        {emailList.map((item, index) => (
          <Box
            key={index}
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              p: 2,
              borderRadius: 1,
              mt: 1,
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              {item.provider === 'google' && (
                <Google
                  size="20"
                  variant="Bold"
                  color="#4285F4"
                  style={{ marginLeft: 8 }}
                />
              )}
              {item.provider === 'apple' && (
                <Apple
                  size="20"
                  variant="Bold"
                  color="black"
                  style={{ marginLeft: 8 }}
                />
              )}
              {item.provider === 'email' && (
                <Sms
                  size="20"
                  variant="Bold"
                  color="#1976d2"
                  style={{ marginLeft: 8 }}
                />
              )}

              <Box>
                <Typography sx={{ fontWeight: 'bold' }}>
                  {item.email}
                </Typography>
                <Typography variant="body2">۱ ماه پیش</Typography>
              </Box>
            </Box>

            <IconButton>
              <Trash size="20" color="gray" variant="Outline" />
            </IconButton>
          </Box>
        ))}
      </Box>

      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
        <DialogTitle
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: '#F5F5F5',
          }}
        >
          افزودن ایمیل / سوشال
          <IconButton onClick={handleClose}>
            <CloseSquare size="24" color="gray" />
          </IconButton>
        </DialogTitle>
        <DialogContent>
          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
            <TextField
              fullWidth
              label="ایمیل"
              placeholder="abc@email.com"
              sx={{
                mb: 2,
                '& .MuiOutlinedInput-root': {
                  '& fieldset': { borderColor: '#1976d2' },
                  '&:hover fieldset': { borderColor: '#1976d2' },
                  '&.Mui-focused fieldset': { borderColor: '#1976d2' },
                },
                '& label.Mui-focused': { color: '#1976d2' },
              }}
            />
            <Button
              variant="contained"
              fullWidth
              sx={{
                borderRadius: '10px',
                backgroundColor: '#1976d2',
                '&:hover': { backgroundColor: '#115293' },
              }}
            >
              ارسال کد تایید
            </Button>

            <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
              <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
                یا
              </Typography>
              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
            </Box>

            <Box sx={{ display: 'flex', gap: 1 }}>
              <Button
                sx={{
                  width: '50%',
                  border: 2,
                  borderColor: '#1976d2',
                  color: '#1976d2',
                  borderRadius: '8px',
                }}
              >
                <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
                گوگل
              </Button>
              <Button
                sx={{
                  width: '50%',
                  border: 2,
                  borderColor: '#1976d2',
                  color: '#1976d2',
                  borderRadius: '8px',
                }}
              >
                <Apple size="20" color="black" style={{ marginLeft: 8 }} />
                اپل
              </Button>
            </Box>
          </Box>
        </DialogContent>
      </Dialog>
    </div>
  );
}