'use client';

import { useState } from 'react';
import type { Meta, StoryObj } from "@storybook/react";
import {AIChatbox} from './ChatApp.stories';

const ChatBubble = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleChat = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="fixed bottom-5 right-5">
      {isOpen && <div className="fixed bottom-24 right-4">
        <AIChatbox />
      </div>
      }
      <button
        onClick={toggleChat}
        className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full focus:outline-none shadow-lg transition duration-300 ease-in-out h-14 w-14"
        aria-label="Toggle Chat"
      >
        <span>{isOpen ? '×' : 'Chat'}</span>
      </button>
    </div>
  );
};

function ChatActionStory() {
  return (
    <div>
      <h1>Hello</h1>
      <ChatBubble />
    </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: {},
};