import { settingSections } from "../data/mockData";
import SettingsContent from "./SettingsContent";

export default function SettingsWindow({ active, setActive }) {
  return (
    <div className="grid min-h-0 flex-1 grid-cols-[180px_minmax(0,1fr)] max-sm:grid-cols-1">
      <aside className="h-full border-r border-line bg-surface2 p-3 max-sm:h-auto max-sm:border-b max-sm:border-r-0">
        <div className="grid gap-1">
          {settingSections.map((item) => (
            <button
              key={item}
              className={`rounded-xl px-3 py-3 text-left text-[13px] font-bold transition ${
                active === item ? "bg-[var(--primary-soft)] text-primary" : "text-muted hover:bg-surface"
              }`}
              onClick={() => setActive(item)}
            >
              {item}
            </button>
          ))}
        </div>
      </aside>
      <section className="flex h-full min-h-0 flex-1 flex-col gap-5 p-5">
        <SettingsContent active={active} />
      </section>
    </div>
  );
}
