import type { PropsWithChildren } from 'react';

import { Sidebar } from './Sidebar';

type AppShellProps = PropsWithChildren<{
  active: string;
  onSelect: (value: string) => void;
  onLogout: () => void;
}>;

const scrollClass =
  '[scrollbar-width:thin] [scrollbar-color:rgba(59,130,246,0.55)_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-blue-500/45 hover:[&::-webkit-scrollbar-thumb]:bg-blue-500/65';

export function AppShell({
  active,
  onSelect,
  onLogout,
  children,
}: AppShellProps) {
  return (
    <div className="flex h-screen overflow-hidden bg-ink-950 text-white">
      <Sidebar
        active={active}
        onSelect={onSelect}
        onLogout={onLogout}
      />

      <main className={`min-w-0 flex-1 overflow-auto p-4 ${scrollClass}`}>
        {children}
      </main>
    </div>
  );
}