import React from 'react';
import styled from 'styled-components';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { Button } from '@redocly/theme/components/Button/Button';
import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';

export function InternalServerErrorLayout(): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <Wrapper data-component-name="layouts/InternalServerError">
      <StatusText>500</StatusText>
      <Title data-translation-key="page.internalServerError.title">
        {translate('page.internalServerError.title', 'Internal Server Error')}
      </Title>
      <Description data-translation-key="page.internalServerError.description">
        {translate(
          'page.internalServerError.description',
          'Something went wrong on our end. Please try again later or contact support if the problem persists.',
        )}
      </Description>
      <Button
        variant="primary"
        size="large"
        to="/"
        data-translation-key="page.homeButton"
        icon={<ArrowLeftIcon />}
      >
        {translate('page.homeButton', 'Go home')}
      </Button>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  height: 100%;
  max-width: var(--page-500-max-width);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: var(--page-500-margin-vertical) var(--page-500-margin-horizontal);
  font-family: var(--page-500-font-family);
  gap: var(--page-500-gap);
`;

const StatusText = styled.div`
  color: var(--page-500-status-text-color);
  font-size: var(--page-500-status-font-size);
  line-height: var(--page-500-status-line-height);
  font-weight: var(--page-500-status-font-weight);
`;

const Title = styled.div`
  color: var(--page-500-title-text-color);
  font-size: var(--page-500-title-font-size);
  line-height: var(--page-500-title-line-height);
  font-weight: var(--page-500-title-font-weight);
`;

const Description = styled.div`
  color: var(--page-500-description-text-color);
  font-size: var(--page-500-description-font-size);
  line-height: var(--page-500-description-line-height);
  font-weight: var(--page-500-description-font-weight);
`;