import { tabs } from "../data/mockData";
import BottomTabs from "./BottomTabs";
import TitleBar from "./TitleBar";
import ClonePage from "../pages/ClonePage";
import DistillPage from "../pages/DistillPage";
import KnowledgePage from "../pages/KnowledgePage";
import SkillsPage from "../pages/SkillsPage";

export default function MainShell(props) {
  const activeTitle = tabs.find((tab) => tab.id === props.activeTab)?.label ?? "AI微信分身助手";
  const content = {
    clone: <ClonePage />,
    knowledge: <KnowledgePage active={props.activeKnowledge} setActive={props.setActiveKnowledge} />,
    skills: <SkillsPage active={props.activeSkill} setActive={props.setActiveSkill} />,
    distill: <DistillPage />,
  }[props.activeTab];

  return (
    <div className="app-window flex h-dvh w-full flex-col overflow-hidden rounded-[12px]">
      <TitleBar title={activeTitle} theme={props.theme} setTheme={props.setTheme} />
      <main className="relative flex min-h-0 flex-1 flex-col overflow-y-auto px-5 py-5">{content}</main>
      <BottomTabs activeTab={props.activeTab} setActiveTab={props.setActiveTab} />
    </div>
  );
}
