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

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

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

  return (
    <Wrapper data-component-name="Pages/Forbidden">
      <Header>403</Header>
      <Description data-translation-key="page.forbidden.title">
        {translate('page.forbidden.title', 'Access forbidden')}
      </Description>
      <HomeButton variant="primary" size="large" to="/" data-translation-key="page.homeButton">
        {translate('page.homeButton', 'Go home')}
      </HomeButton>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 25px auto;
  font-family: var(--page-403-font-family);
  text-align: center;
`;

const Header = styled.div`
  color: var(--page-403-header-text-color);
  margin: var(--page-403-header-margin);
  font-size: var(--page-403-header-font-size);
  line-height: var(--page-403-header-line-height);
  font-weight: var(--page-403-header-font-weight);
`;

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

const HomeButton = styled(Button)`
  margin-top: var(--page-403-button-margin);
`;