import React from 'react';

interface ResearchShellProps {
  sidebar: React.ReactNode;
  toolbar: React.ReactNode;
  inspector?: React.ReactNode;
  children: React.ReactNode;
}

export const ResearchShell: React.FC<ResearchShellProps> = ({
  sidebar,
  toolbar,
  inspector,
  children,
}) => (
  <div className="research-shell grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)_360px]">
    <aside className="border-b border-[#1d2430] bg-[var(--research-surface)] lg:border-b-0 lg:border-r">
      {sidebar}
    </aside>
    <section className="flex min-h-0 min-w-0 flex-col bg-[var(--research-bg)]">
      <div className="border-b border-[#1d2430] bg-[var(--research-surface)]/90 px-5 py-4 backdrop-blur">
        {toolbar}
      </div>
      <div className="min-h-0 flex-1 overflow-auto p-5">{children}</div>
    </section>
    {inspector ? (
      <aside className="hidden min-h-0 overflow-auto border-l border-[#1d2430] bg-[var(--research-surface)] lg:block">
        {inspector}
      </aside>
    ) : null}
  </div>
);
