import { html } from 'lit';

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

const meta = {
  title: 'Widgets/AI Assist Bar',
  tags: ['autodocs'],
  argTypes: {
    mode: {
      control: 'radio',
      options: ['project', 'frontpage'],
    },
  },
  args: {
    mode: 'project',
  },
  render: ({ mode }) => html`
    <div class="story-stack">
      <p class="story-heading">Interactive Preview</p>
      <p class="story-note">
        Use the controls panel to switch the widget context. The component itself is live,
        so you can type into it, change the fake model, and submit to watch its loading and
        reveal states.
      </p>
      <ai-assist-bar mode=${mode}></ai-assist-bar>
    </div>
  `,
};

export default meta;

export const Default = {};

export const Frontpage = {
  args: {
    mode: 'frontpage',
  },
};