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

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

export interface MarkdocExampleProps {
  language: string;
  rawContent: string;
  renderDemo?: boolean;
  demoContent: React.Component<React.PropsWithChildren>[];
  withLabels?: boolean;
  codeLabel?: string;
  resultLabel?: string;
  title?: string;
}
export function MarkdocExample(props: MarkdocExampleProps) {
  const {
    language,
    rawContent,
    renderDemo,
    demoContent,
    withLabels,
    codeLabel,
    resultLabel,
    title,
  } = props;

  const renderLabels = renderDemo ? (withLabels === undefined ? true : withLabels) : false;
  return (
    <div data-component-name="Markdoc/MarkdocExample/MarkdocExample">
      {renderLabels ? <Label>{codeLabel ? codeLabel : 'Code:'}</Label> : null}
      <CodeBlock lang={language} source={rawContent} header={{ title, controls: { copy: {} } }} />
      {renderDemo ? (
        <>
          {renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}
          {demoContent}
        </>
      ) : null}
    </div>
  );
}

const Label = styled.div`
  margin: 10px 0;
`;