import type { ReactNode } from 'react';

type SettingsPaneLayoutProps = {
  sidebar: ReactNode;
  children: ReactNode;
};

type SettingsPaneSectionProps = {
  title: string;
  children: ReactNode;
};

export function SettingsPaneLayout({
  sidebar,
  children,
}: SettingsPaneLayoutProps) {
  return (
    <div className="flex min-h-0 min-w-0 flex-1">
      <aside className="border-border bg-background/90 w-60 shrink-0 border-r p-3">
        {sidebar}
      </aside>
      <section className="flex min-h-0 min-w-0 flex-1 flex-col p-5">
        {children}
      </section>
    </div>
  );
}

export function SettingsPaneSection({
  title,
  children,
}: SettingsPaneSectionProps) {
  return (
    <div className="mt-3">
      <div className="flex items-center justify-between gap-3">
        <p className="text-foreground/70 text-sm">{title}</p>
        {children}
      </div>
    </div>
  );
}