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

import type { JSX } from 'react';

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 Forbidden(): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <ForbiddenWrapper data-component-name="layouts/Forbidden">
      <StatusText>403</StatusText>
      <Title data-translation-key="page.forbidden.title">
        {translate('page.forbidden.title', 'Access forbidden')}
      </Title>
      <Description data-translation-key="page.forbidden.description">
        {translate(
          'page.forbidden.description',
          "You don't have permission to access this page. If you believe this is an error, contact your administrator or return to the homepage.",
        )}
      </Description>
      <Button
        variant="primary"
        size="large"
        to="/"
        data-translation-key="page.homeButton"
        icon={<ArrowLeftIcon />}
      >
        {translate('page.homeButton', 'Go home')}
      </Button>
    </ForbiddenWrapper>
  );
}

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

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

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

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