import { useTranslation } from 'react-i18next';
import { Box, Button, Typography } from '@mui/material';
import { Edit2 } from 'iconsax-reactjs';
import DigitInput from '@/components/components/DigitsInput';

interface SmsOtpProps {
  value: string;
  type: 'phone' | 'email';
}

export function SmsOtpForm({ value, type }: SmsOtpProps) {
  const { t } = useTranslation('authentication');

  return (
    <Box sx={{ width: '100%' }}>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 4,
          mb: 0.5,
        }}
      >
        <Typography variant="h5">اعتبارسنجی</Typography>

        <Button
          variant="outlined"
          size="large"
          sx={{ direction: 'auto', textTransform: 'lowercase' }}
          endIcon={<Edit2 />}
        >
          {value}
        </Button>
      </Box>
      <Typography variant="body2" color="textSecondary">
        کد تایید ۴ رقمی به شماره موبایل شما ارسال شد. لطفا آن را وارد کنید.
      </Typography>
      <DigitInput onChange={(value) => console.log(value)} />
      <Button>{t('smsOtp.confirmAndLogin')}</Button>
    </Box>
  );
}