"use client";

import { useState } from "react";
import TemplateList from "./template-list";
import TemplateAdd from "./template-add";
import TemplateEdit from "./template-edit";

export default function TemplateView() {
    const [view, setView] = useState<"list" | "add" | "edit">("list");
    const [selectedId, setSelectedId] = useState<string | null>(null);

    return (
        <div className="flex-1 h-full w-full bg-[#f0f2f5] dark:bg-[#111b21] overflow-hidden flex flex-col">
            {view === "list" && <TemplateList 
                onAdd={() => setView("add")} 
                onEdit={(id) => { setSelectedId(id); setView("edit"); }} 
            />}
            {view === "add" && <TemplateAdd onBack={() => setView("list")} />}
            {view === "edit" && selectedId && <TemplateEdit templateId={selectedId} onBack={() => setView("list")} />}
        </div>
    );
}