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

import { concatClassNames } from '@redocly/theme/core/utils';

type MermaidProps = {
  diagramHtml: string;
  'data-source'?: string;
  'data-hash'?: string;
  className?: string;
};

export function Mermaid({
  diagramHtml,
  'data-source': dataSource,
  'data-hash': dataHash,
  className,
}: MermaidProps): JSX.Element {
  return (
    <Wrapper
      className={concatClassNames('mermaid-wrapper', className)}
      dangerouslySetInnerHTML={{ __html: diagramHtml }}
      data-component-name="Markdoc/Mermaid/Mermaid"
      data-source={dataSource}
      data-hash={dataHash}
    />
  );
}

const Wrapper = styled.div`
  background-color: var(--mermaid-bg-color);
  border-radius: var(--mermaid-border-radius);

  * {
    font-family: var(--mermaid-font-family) !important;
  }

  .mermaid > svg {
    font-size: var(--font-size-base) !important;
    max-width: 100%;
  }
`;