import type { ReactNode } from 'react';
import { Activity } from 'lucide-react';

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: string;
  description?: string;
  actions?: ReactNode;
}) {
  return (
    <div className="page-toolbar">
      <div className="page-heading">
        <div className="page-kicker">
          <Activity size={13} aria-hidden="true" />
          <span>OPERATIONS / LIVE INTERFACE</span>
        </div>
        <h1 className="page-title">{title}</h1>
        {description ? <p className="page-description">{description}</p> : null}
      </div>
      {actions ? <div className="page-actions">{actions}</div> : null}
    </div>
  );
}

export function Surface({
  title,
  actions,
  children,
  className = '',
}: {
  title?: string;
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section className={`surface ${className}`.trim()}>
      {title || actions ? (
        <header className="surface-header">
          {title ? (
            <h2 className="surface-title">
              <span className="surface-title-mark" aria-hidden="true" />
              {title}
            </h2>
          ) : <span />}
          {actions}
        </header>
      ) : null}
      <div className="surface-body">{children}</div>
    </section>
  );
}

export function Metric({
  label,
  value,
  icon,
  hint,
  tone = 'default',
}: {
  label: string;
  value: number | string;
  icon?: ReactNode;
  hint?: string;
  tone?: 'default' | 'info' | 'success' | 'warning' | 'danger';
}) {
  return (
    <div className={`metric metric--${tone}`}>
      <span className="metric-signal" aria-hidden="true" />
      <div className="metric-copy">
        <div className="metric-label">{label}</div>
        <div className="metric-value">{value}</div>
        {hint ? <div className="metric-hint">{hint}</div> : null}
      </div>
      {icon ? <div className="metric-icon" aria-hidden="true">{icon}</div> : null}
    </div>
  );
}