import { Box, Typography, Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
import React from 'react';

export function RecentLogins() {
  const { t } = useTranslation('setting');
  const data = [
    {
      id: 0,
      time: 'دقایقی پیش',
      device: 'asus i5 24i',
      ip: '192.168.1.1',
      current: true,
    },
    {
      id: 1,
      time: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
      device: 'samsung s23 ultra',
      ip: '192.220.1.1',
      current: false,
    },
  ];

  return (
    <PageWrapper>
      <CardContainer
        title={t('securityForm.recentLogins')}
        subtitle={t('securityForm.description')}
      >
        <Box
          sx={{
            py: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            bgcolor: 'background.paper',
            flex: 1,
            borderBottom: '1px solid',
            borderColor: 'divider',
            '&:last-child': {
              borderBottom: 'none',
            },
          }}
        >
          <Box sx={{ px: 4 }}>
            {data.map((d) => (
              <React.Fragment key={d.id}>
                <Box
                  sx={{
                    display: 'flex',
                    flexDirection: { xs: 'column', sm: 'row' },
                    alignItems: { xs: 'flex-start', sm: 'center' },
                    minHeight: 50,
                  }}
                >
                  <Typography
                    variant="body2"
                    sx={{
                      flexBasis: { xs: '100%', sm: 'auto' },
                      mb: { xs: 1, sm: 0 },
                      minWidth: { sm: '172.5px' },
                      order: { xs: 1, sm: 1 },
                    }}
                  >
                    {d.time}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      flexBasis: { xs: '100%', sm: 'auto' },
                      mb: { xs: 1, sm: 0 },
                      minWidth: { sm: '172.5px' },
                      order: { xs: 1, sm: 1 },
                    }}
                  >
                    {d.device}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      flexBasis: { xs: '100%', sm: 'auto' },
                      mb: { xs: 1, sm: 0 },
                      minWidth: { sm: '172.5px' },
                      order: { xs: 1, sm: 1 },
                    }}
                  >
                    {d.ip}
                  </Typography>
                  <Box
                    sx={{
                      flexBasis: { xs: '100%', sm: 'auto' },
                      mb: { xs: 1, sm: 0 },
                      textAlign: { xs: 'left', sm: 'center' },
                      minWidth: { sm: '172.5px' },
                      order: { xs: 4, sm: 4 },
                    }}
                  >
                    {d.current && (
                      <Button
                        variant="outlined"
                        sx={{
                          borderRadius: 2,
                          border: '2px solid',
                          borderColor: 'success.main',
                          height: '30px',
                          whiteSpace: 'nowrap',
                          color: 'success.main',
                          textTransform: 'none',
                        }}
                      >
                        {t('securityForm.currentDevice')}
                      </Button>
                    )}
                  </Box>
                </Box>
                <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
              </React.Fragment>
            ))}
          </Box>
        </Box>
      </CardContainer>
    </PageWrapper>
  );
}