import { type ReactNode } from 'react';

import Button from '@material-hu/mui/Button';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

type PlanLoadErrorStateProps = {
  title?: string;
  description?: ReactNode;
  actionLabel?: string;
  onRetry?: () => void;
};

const PlanLoadErrorState = ({
  title,
  description,
  actionLabel,
  onRetry,
}: PlanLoadErrorStateProps) => {
  const { t } = useLokaliseTranslation('loans');
  const resolvedTitle = title ?? t('status.error_title');
  const resolvedDescription = description ?? t('status.error_description');
  const resolvedAction = actionLabel ?? t('status.error_retry');

  return (
    <Stack
      sx={{
        alignItems: 'center',
        width: '100%',
        gap: 2,
        py: 4,
        textAlign: 'center',
      }}
    >
      <Typography
        variant="globalL"
        sx={{ fontWeight: 'fontWeightBold' }}
      >
        {resolvedTitle}
      </Typography>
      <Typography
        variant="globalM"
        sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
      >
        {resolvedDescription}
      </Typography>
      {onRetry && (
        <Button
          variant="contained"
          color="primary"
          onClick={onRetry}
        >
          {resolvedAction}
        </Button>
      )}
    </Stack>
  );
};

export default PlanLoadErrorState;