// 1. Because using web components in React is not mature yet
// we need to create a bridge React component <AnnotativeCode /> with `@lit/react`
import React from 'react';
import { createComponent } from '@lit/react';
import { AnnotativeCode as AnnotativeCodeWC } from 'annotative-code';

export const AnnotativeCode = createComponent({
  tagName: 'annotative-code',
  elementClass: AnnotativeCodeWC,
  react: React,
});

import { AnnotativeCode } from './AnnotativeCode';

// 2. Only import the language function and theme css in need can reduce the bundle size
import languageFn from 'annotative-code/bin/highlight.js/languages/javascript';
import themeCss from 'annotative-code/bin/highlight.js/css/a11y-dark';

// 3. Code/content to be highlighted
const content = `<Button variant="____variant____">
  Click me!
</Button>`;

// 4. Add annotations to the highlighted code!
const annotation = {
  variant: {
    type: 'string',
    knob: 'select',
    options: ['text', 'contained', 'outlined'],
    value: variant,
  },
};

<AnnotativeCode
  themeCss={themeCss}
  languageFn={languageFn}
  content={content}
  annotation={annotation}
  onValueChange={({ detail }) => setVariant(detail.valueObj.variant)}
/>;