import { html } from 'lit';

import '../js/ai-assist-clippy.js';

const meta = {
  title: 'Widgets/AI Assist Clippy',
  tags: ['autodocs'],
  argTypes: {
    mode: {
      control: 'radio',
      options: ['commenter', 'uploader'],
    },
  },
  args: {
    mode: 'commenter',
  },
  render: ({ mode }) => html`
    <div class="story-stack">
      <p class="story-heading">Interactive Preview</p>
      <p class="story-note">
        Click the orb to trigger the speech bubble immediately, or wait a few seconds for it
        to pop on its own. Change the mode in controls to swap between commenter and uploader
        suggestion sets.
      </p>
      <div class="story-clippy-row">
        <ai-assist-clippy mode=${mode}></ai-assist-clippy>
      </div>
    </div>
  `,
};

export default meta;

export const Default = {};

export const Uploader = {
  args: {
    mode: 'uploader',
  },
};