import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import type React from 'react';

import { ChatTypingIndicator } from '../components/chat/chat-typing-indicator';

/**
 * Three pulsing dots shown while the assistant reply streams in — the
 * "Fae is typing" affordance under the message header. Also rendered
 * inside `<ChatInput>` (size="sm") while a send is in flight.
 */

const plainDecorator = (Story: React.ComponentType) => (
  <div style={{ maxWidth: 400, background: 'var(--color-bg)' }} className="p-4">
    <Story />
  </div>
);

const meta = {
  title: 'Chat/ChatTypingIndicator',
  component: ChatTypingIndicator,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          "Pulsing three-dot typing indicator. Sizes sm/md/lg; optional 'Assistant is typing' label; dot color overridable via dotClassName.",
      },
    },
  },
  decorators: [plainDecorator],
} satisfies Meta<typeof ChatTypingIndicator>;

export default meta;
type Story = StoryObj<typeof meta>;

/** Default — medium dots, no label. */
export const Default: Story = {};

/** Small — as rendered inside ChatInput while a send is in flight. */
export const Small: Story = { args: { size: 'sm' } };

/** Large dots. */
export const Large: Story = { args: { size: 'lg' } };

/** With the "Assistant is typing" label. */
export const WithText: Story = { args: { showText: true } };

/** Muted dots via dotClassName override. */
export const MutedDots: Story = {
  args: { dotClassName: 'bg-ods-text-secondary' },
};