/**
 * @fileoverview Simple integration example
 */

"use client";

import React from "react";
import { ChatbotProvider, ChatbotWidget } from "../index";

/**
 * Simplest possible chatbot integration
 */
export function SimpleChatExample() {
  return (
    <ChatbotProvider>
      <div style={{ padding: "20px" }}>
        <h1>My App</h1>
        <p>This is a simple app with a chatbot widget.</p>

        {/* The chatbot widget with minimal configuration */}
        <ChatbotWidget />
      </div>
    </ChatbotProvider>
  );
}

/**
 * Example with basic styling
 */
export function StyledChatExample() {
  return (
    <ChatbotProvider>
      <div className="min-h-screen bg-gray-100 p-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold text-center mb-8">
            Welcome to My Application
          </h1>
          <div className="bg-white rounded-lg shadow-md p-6">
            <p className="text-gray-600 mb-4">
              This application includes an AI-powered chatbot to help answer
              your questions. Click the chat button in the bottom-right corner
              to get started.
            </p>
          </div>
        </div>

        <ChatbotWidget
          position="bottom-right"
          placeholder="Ask me anything..."
        />
      </div>
    </ChatbotProvider>
  );
}