// src/ChatLayout.jsx
// ChatLayout.jsx
import React from "react";
import ChatHeader from "./ChatHeader";
import ChatWindow from "./ChatWindow";
import ChatInput from "./ChatInput";

export default function ChatLayout({
  theme,
  messages,
  loading,
  onSend,
  onStop,
  onToggleTheme,
  onReloadHistory,
  onFreshStart
}) {
  return (
    <div className={`d-flex flex-column vh-100 ${theme.bodyBg}`}>
      <ChatHeader
        theme={theme}
        onToggleTheme={onToggleTheme}
        onReloadHistory={onReloadHistory}
        onFreshStart={onFreshStart}
      />
      <div className="flex-grow-1 overflow-auto">
        <ChatWindow messages={messages} loading={loading} theme={theme} />
      </div>

      {loading && (
        <div className="p-2 text-center">
          <button className="btn btn-warning btn-sm" onClick={onStop}>
            ⏹ Stop Generating
          </button>
        </div>
      )}

      <ChatInput onSend={onSend} loading={loading} />
    </div>
  );
}