'use client';
import React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export interface AppShellProps {
  navRail: React.ReactNode;
  inspector?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export const AppShell: React.FC<AppShellProps> = ({
  navRail,
  inspector,
  children,
  className,
}) => {
  return (
    <div
      className={twMerge(
        clsx(
          'flex h-screen w-screen overflow-hidden',
          'bg-gray-950 text-gray-100',
        ),
        className,
      )}
    >
      {/* NavRail — 64px fixed left */}
      {navRail}

      {/* Main content — flex-1 */}
      <main className="flex-1 overflow-y-auto overflow-x-hidden">
        {children}
      </main>

      {/* Inspector panel — slide-in right */}
      {inspector}
    </div>
  );
};

AppShell.displayName = 'AppShell';