import ProjectSwitcher from './project-switcher.jsx';

// AdminShell renders the content card only. The sidebar/rail lives in the
// root layout (app/layout.js) so it persists across navigations — previously
// each admin page mounted its own Sidebar via this shell, causing a remount
// on every click.
/** @param {{ kicker?: string, title?: any, description?: any, actions?: any, hideProjectSwitcher?: boolean, children?: any }} props */
export function AdminShell({ kicker = 'madarX OS v1.0', title, description, actions, hideProjectSwitcher, children }) {
  return (
    <main className="admin-shell">
      <header className="admin-header">
        <div>
          <span className="admin-kicker">{kicker}</span>
          <h1>{title}</h1>
          {description ? <p>{description}</p> : null}
        </div>
        <div className="admin-header-actions">
          {hideProjectSwitcher ? null : <ProjectSwitcher />}
          {actions}
        </div>
      </header>
      {children}
    </main>
  );
}

/** @param {{ label?: any, value?: any, tone?: string }} props */
export function StatCard({ label, value, tone }) {
  return (
    <div className={`admin-stat ${tone || ''}`}>
      <b>{value}</b>
      <span>{label}</span>
    </div>
  );
}

/** @param {{ children?: any, tone?: string }} props */
export function StatusPill({ children, tone = 'neutral' }) {
  return <span className={`admin-pill ${tone}`}>{children}</span>;
}

/** @param {{ title?: any, children?: any }} props */
export function EmptyState({ title, children }) {
  return (
    <div className="admin-empty">
      <b>{title}</b>
      <p>{children}</p>
    </div>
  );
}
