import { Box, Button } from '@mui/material';
import { type PhoneActionButtonsProps } from '@/features/profile/types/settingsType';

export default function PhoneActionButtons({
  isEditing,
  toggleEdit,
  t,
}: PhoneActionButtonsProps) {
  return (
    <Box sx={{ display: 'flex', gap: 1 }}>
      {isEditing ? (
        <>
          <Button
            type="button"
            variant="text"
            onClick={toggleEdit}
            size="large"
            sx={{
              color: 'primary.main',
              textTransform: 'none',
              width: { xs: '100%', sm: 'auto' },
            }}
          >
            {t('settingForm.rejectButton')}
          </Button>
          <Button
            type="submit"
            form="phoneForm"
            size="large"
            variant="outlined"
            sx={{
              borderRadius: 1,
              bgcolor: 'primary.main',
              color: 'primary.contrastText',
              whiteSpace: 'nowrap',
              textTransform: 'none',
            }}
          >
            {t('settingForm.saveButton')}
          </Button>
        </>
      ) : (
        <Button
          onClick={toggleEdit}
          size="large"
          variant="outlined"
          sx={{
            borderRadius: 1,
            whiteSpace: 'nowrap',
            textTransform: 'none',
          }}
        >
          {t('settingForm.editPhoneNumber')}
        </Button>
      )}
    </Box>
  );
}
