import { Stack, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { tSafe } from '../../utils/format';

interface ScenarioBadgeProps {
  livemode: boolean;
  label?: string;
}

export default function ScenarioBadge({ livemode, label = undefined }: ScenarioBadgeProps) {
  const { t } = useLocaleContext();
  return (
    <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.5 }}>
      <Typography
        component="span"
        sx={{
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.1em',
          lineHeight: 1,
          textTransform: 'uppercase',
          color: 'primary.main',
          bgcolor: (theme) =>
            theme.palette.mode === 'dark' ? `${theme.palette.primary.main}1A` : `${theme.palette.primary.main}0D`,
          px: 1,
          py: 0.5,
          borderRadius: '4px',
        }}>
        {label || tSafe(t, 'payment.checkout.orderSummary', 'Order Summary')}
      </Typography>
      {!livemode && (
        <Typography
          component="span"
          sx={{
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.1em',
            lineHeight: 1,
            textTransform: 'uppercase',
            color: (theme) => (theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[400]),
            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : theme.palette.grey[100]),
            px: 1,
            py: 0.5,
            borderRadius: '4px',
          }}>
          {t('common.livemode')}
        </Typography>
      )}
    </Stack>
  );
}