import React from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Button, Result, Typography } from 'antd';
import { useTranslation } from 'react-i18next'; // Import useTranslation hook
import { useNavigate } from 'react-router-dom';

const { Paragraph, Text } = Typography;

const ErrorPage: React.FC = () => {
  const { t } = useTranslation(); // Initialize useTranslation hook
  const naviagate = useNavigate()

  const handleRefetch = () => {
    window.location.reload();
  };

  const handleGoToLogin = () => {
    naviagate("/")
  };

  return (
    <Result
      status="error"
      title={t('errorPage.networkError')}
      subTitle={t('errorPage.checkAndModify')} 
      extra={[
        <Button type="primary" key="refetch" onClick={handleRefetch}>
          {t('errorPage.refetch')} {/* Translate button text */}
        </Button>,
        <Button key="goToLogin" onClick={handleGoToLogin}>
          {t('errorPage.goToHome')} {/* Translate button text */}
        </Button>,
      ]}
    >
     
    </Result>
  );
};

export default ErrorPage;
