import { ChatInterface } from '../ChatInterface';
import { ThemeProvider } from '../ThemeProvider';
import { SidebarProvider } from '@/components/ui/sidebar';
import { AppSidebar } from '../AppSidebar';

export default function ChatInterfaceExample() {
  const style = {
    "--sidebar-width": "20rem",
    "--sidebar-width-icon": "4rem",
  };

  return (
    <ThemeProvider>
      <SidebarProvider style={style as React.CSSProperties}>
        <div className="flex h-screen w-full">
          <AppSidebar buddyName="CodeBuddy" />
          <div className="flex-1">
            <ChatInterface
              buddyName="CodeBuddy"
              onSettingsClick={() => console.log('Settings clicked')}
            />
          </div>
        </div>
      </SidebarProvider>
    </ThemeProvider>
  );
}