import type { ReactNode } from 'react';

export interface DashboardLayoutProps {
  /** Page title */
  title: string;
  /** Optional subtitle/description */
  subtitle?: string;
  /** Header actions (buttons, etc) */
  actions?: ReactNode;
  /** Main content */
  children: ReactNode;
  /** Sidebar content */
  sidebar?: ReactNode;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

export function DashboardLayout({
  title,
  subtitle,
  actions,
  children,
  sidebar,
  loading = false,
  className,
}: DashboardLayoutProps) {
  return (
    <div
      className={className}
      style={{
        minHeight: '100vh',
        backgroundColor: '#f9fafb',
      }}
    >
      {/* Header */}
      <header
        style={{
          backgroundColor: '#fff',
          borderBottom: '1px solid #e5e7eb',
          padding: '16px 24px',
        }}
      >
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            maxWidth: '1400px',
            margin: '0 auto',
          }}
        >
          <div>
            <h1
              style={{
                fontSize: '24px',
                fontWeight: 600,
                color: '#111827',
                margin: 0,
              }}
            >
              {title}
            </h1>
            {subtitle && (
              <p
                style={{
                  fontSize: '14px',
                  color: '#6b7280',
                  margin: '4px 0 0 0',
                }}
              >
                {subtitle}
              </p>
            )}
          </div>
          {actions && <div style={{ display: 'flex', gap: '12px' }}>{actions}</div>}
        </div>
      </header>

      {/* Main content */}
      <div
        style={{
          maxWidth: '1400px',
          margin: '0 auto',
          padding: '24px',
          display: 'flex',
          gap: '24px',
        }}
      >
        {/* Main area */}
        <main
          style={{
            flex: 1,
            minWidth: 0,
          }}
        >
          {loading ? (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '24px',
              }}
            >
              {[1, 2, 3].map((i) => (
                <div
                  key={i}
                  style={{
                    height: '200px',
                    backgroundColor: '#fff',
                    borderRadius: '8px',
                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                  }}
                />
              ))}
            </div>
          ) : (
            children
          )}
        </main>

        {/* Sidebar */}
        {sidebar && (
          <aside
            style={{
              width: '320px',
              flexShrink: 0,
            }}
          >
            {sidebar}
          </aside>
        )}
      </div>
    </div>
  );
}
