import { Box, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { type DisplayFieldProps } from '@/features/profile/types/settingsType';

export function DisplayField({ label, value }: DisplayFieldProps) {
  const { t } = useTranslation('setting');
  const displayValue = value?.trim() || t('settingForm.notDetermined');

  return (
    <Box
      sx={{
        flex: 1,
      }}
    >
      <Typography variant="caption" color="text.secondary">
        {label}
      </Typography>
      <Typography variant="body1" color="text.primary">
        {displayValue}
      </Typography>
    </Box>
  );
}
