import type { ReactNode } from 'react';

export function AnalyticsLoadingSkeleton({ height = 180 }: { height?: number }) {
  return (
    <div
      className="analytics-skeleton"
      role="status"
      aria-label="Loading"
      style={{ minHeight: height }}
    />
  );
}

export function AnalyticsErrorState({ title, body }: { title: string; body: string }) {
  return (
    <div className="analytics-error" role="alert">
      <strong>{title}</strong>
      <p>{body}</p>
    </div>
  );
}

export function AnalyticsForbiddenState({
  title = 'You do not have access to this panel',
  body = 'Ask an administrator to grant analytics access if you need it.',
}: {
  title?: string;
  body?: string;
}) {
  return (
    <div className="analytics-forbidden">
      <strong>{title}</strong>
      <p>{body}</p>
    </div>
  );
}

export function AnalyticsEmptyState({ title, body }: { title: string; body: string }) {
  return (
    <div className="analytics-empty">
      <strong>{title}</strong>
      <p>{body}</p>
    </div>
  );
}

export function AnalyticsPanel({
  title,
  description,
  actions,
  children,
}: {
  title: string;
  description?: string;
  actions?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="analytics-panel card">
      <div className="card-header">
        <div>
          <h3>{title}</h3>
          {description ? <p>{description}</p> : null}
        </div>
        {actions ? <div className="page-actions">{actions}</div> : null}
      </div>
      <div className="analytics-panel-body">{children}</div>
    </section>
  );
}