import Stack from '@material-hu/mui/Stack';
import { appearFromBottom } from '@material-hu/utils/animations';

import StateCard from '@material-hu/components/design-system/StateCard';

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

import { LAYOUT_SX } from '../../constants';

type SettingsErrorProps = {
  onRetry: () => void;
  isLoading: boolean;
};

const SettingsError = ({ onRetry, isLoading }: SettingsErrorProps) => {
  const { t } = useLokaliseTranslation('agents');

  return (
    <Stack
      sx={{
        animation: `${appearFromBottom} 300ms ease-in-out`,
        ...LAYOUT_SX,
      }}
    >
      <StateCard
        title={t('general:error_title')}
        description={t('settings.error')}
        primaryAction={{
          label: t('general:retry'),
          onClick: onRetry,
          loading: isLoading,
        }}
      />
    </Stack>
  );
};

export default SettingsError;