// @design-system: domain/admin/AdminPanel

'use client';

/**
 * AdminPanel — wrapper with toolbar + body slots.
 *
 * Used by list pages, dashboard panels, and approval inbox.
 * Token-only styling. RTL-safe via logical properties.
 *
 * @example
 * ```tsx
 * <AdminPanel
 *   title={t('businesses_title')}
 *   toolbar={<AdminFilterBar ... />}
 * >
 *   <AdminTable ... />
 * </AdminPanel>
 * ```
 */

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { adminPanelVariants } from './variants';

// ─── Types ────────────────────────────────────────────────────────────────────

export interface AdminPanelProps {
  /**
   * Optional heading rendered above the toolbar.
   * Maps to an `<h2>` for document hierarchy.
   */
  title?: string;
  /**
   * Toolbar slot — rendered in a visually separated strip above the body.
   * Typically contains filter controls, search, and action buttons.
   */
  toolbar?: ReactNode;
  /**
   * Body slot — main content area (table, list, metrics grid, etc.).
   */
  children: ReactNode;
  /** Extra className on the root element. */
  className?: string;
  /** Extra className on the toolbar strip. */
  toolbarClassName?: string;
  /** Extra className on the body area. */
  bodyClassName?: string;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * AdminPanel provides a consistently-styled card with an optional header,
 * a toolbar strip, and a scrollable body region.
 */
export function AdminPanel({
  title,
  toolbar,
  children,
  className,
  toolbarClassName,
  bodyClassName,
}: AdminPanelProps) {
  return (
    <div className={cn(adminPanelVariants.root, className)}>
      {title && (
        <div className="px-4 pb-0 pt-4">
          <h2 className={adminPanelVariants.title}>{title}</h2>
        </div>
      )}
      {toolbar && (
        <div className={cn(adminPanelVariants.toolbar, toolbarClassName)} role="toolbar">
          {toolbar}
        </div>
      )}
      <div className={cn(adminPanelVariants.body, bodyClassName)}>{children}</div>
    </div>
  );
}