'use client';

import type { Meta, StoryObj } from "@storybook/react";
import { AutocompleteTextField } from "./TextCompleter.stories";

const emailPrompt = `Predict the next 5-10 words in the following email from the perspective of the writer. Do NOT respond to the text! This is not a conversation! Just recommend what 5-10 words should follow in the current email message. Current email: {{inputText}}`;

function ChatActionStory() {
  
  return (
    <div className="flex flex-col gap-4 max-w-md p-4 rounded-md border shadow-md m-auto mt-4">
      <h2 className="text-xl font-bold">Compose Email</h2>
      <hr />
      <input placeholder="Recipients" className="text-gray-900 p-2 rounded-md border" />
      <input placeholder="Subject" className="text-gray-900 p-2 rounded-md border" />
      <AutocompleteTextField prompt={emailPrompt} placeholder="Compose email" />
      <button className="bg-gray-800 text-white p-2 rounded-md">Send</button>
    </div>
  );
}

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof ChatActionStory> = {
  component: ChatActionStory,
};

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

export const FirstStory: Story = {
  // harded code values for now 😬
  args: {},
};