/**
 * Usage snippets shared between stories and docs.
 */

export const accordionSnippets = {
  vanilla: `import { Accordion } from '@42/core/accordion';

const acc = new Accordion(document.querySelector('[data-c42-accordion]')!, {
  multiple: false,
  collapsible: true,
  defaultValue: 'a',
});
acc.on('accordion:change', (e) => console.log(e.detail.value)); // string[]`,
} as const;

export const tabsSnippets = {
  vanilla: `import { Tabs } from '@42/core/tabs';

const tabs = new Tabs(document.querySelector('[data-c42-tabs]')!, {
  orientation: 'horizontal',
  activationMode: 'automatic',
  defaultValue: 'account',
});
tabs.on('tabs:change', (e) => console.log(e.detail.value)); // string`,
} as const;
export const modalSnippets = {
  vanilla: `import { Modal } from '@42/core/modal';

const modal = new Modal(document.querySelector('[data-c42-modal]')!, {
  closeOnEscape: true,
  closeOnOverlayClick: true,
});
document.querySelector('[data-open]')!.addEventListener('click', () => modal.openModal());
modal.on('modal:close', () => console.log('closed'));`,
} as const;