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

import type { JSX } from 'react';

import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
import { Button } from '@redocly/theme/components/Button/Button';
import { breakpoints } from '@redocly/theme/core/utils';

type NavigationButtonPosition = 'left' | 'right';

export type NavigationButtonProps = {
  label: string;
  link: string;
  text: string;
  translationKey: string;
  position: NavigationButtonPosition;
  icon?: JSX.Element;
  className?: string;
};

export function NavigationButton({
  label,
  link,
  text,
  translationKey,
  position,
  icon = position === 'left' ? <ArrowLeftIcon /> : <ArrowRightIcon />,
  className,
}: NavigationButtonProps): JSX.Element {
  return (
    <NavigationButtonWrapper
      data-component-name="PageNavigation/NavigationButton"
      data-translation-key={translationKey}
      position={position}
    >
      <PageNavigationTitle>{label}</PageNavigationTitle>
      <Button to={link} extraClass={className} variant="link" icon={icon} iconPosition={position}>
        {text}
      </Button>
    </NavigationButtonWrapper>
  );
}

const NavigationButtonWrapper = styled.div<{
  position: NavigationButtonPosition;
}>`
  display: flex;
  flex-direction: column;
  width: var(--page-navigation-button-width);
  text-align: ${({ position }) => position};
  margin: ${({ position }) => (position === 'right' ? '0 0 0 auto' : '0 auto 0 0')};
  padding: var(--page-navigation-button-padding);
  gap: var(--page-navigation-button-gap);
  border: var(--page-navigation-button-border);
  border-radius: var(--page-navigation-button-border-radius);
  min-width: var(--page-navigation-button-min-width);

  @media screen and (max-width: ${breakpoints.medium}) {
    flex: 1;
    width: auto;
    margin: 0;
  }

  &:hover {
    border: var(--page-navigation-button-border-hover);
  }
`;

const PageNavigationTitle = styled.p`
  font-size: var(--page-navigation-button-title-font-size);
  font-weight: var(--page-navigation-button-title-font-weight);
  line-height: var(--page-navigation-button-title-line-height);
  color: var(--page-navigation-button-title-color);
  text-wrap: wrap;
  margin: 0;
`;