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

import type { JSX } from 'react';
import type { ResolvedNavItemWithLink } from '@redocly/config';

import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';

type DocumentationLayoutBottomProps = {
  feedback: React.ReactNode;
  nextPage?: ResolvedNavItemWithLink | null;
  prevPage?: ResolvedNavItemWithLink | null;
  className?: string;
};

export function DocumentationLayoutBottom({
  feedback,
  nextPage,
  prevPage,
}: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element {
  return (
    <Wrapper data-component-name="Layout/DocumentationLayoutBottom">
      <LayoutBottom>{feedback}</LayoutBottom>
      <PageNavigation nextPage={nextPage} prevPage={prevPage} />
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

const LayoutBottom = styled.div`
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;

  > * {
    margin: 25px 0;
  }
`;