import { Section } from "./section";
import { formatCount, formatNullableCount } from "./format";
import type { OverviewStats, StatusNotice, ThemeName, ViewState } from "./types";

export type CauseWiseStatsProps = {
  stats?: OverviewStats | null;
  theme?: ThemeName;
  state?: ViewState;
  error?: StatusNotice | null;
  className?: string;
  headingLevel?: 2 | 3;
};

export function CauseWiseStats({
  stats,
  theme,
  state = "ready",
  error,
  className,
  headingLevel,
}: CauseWiseStatsProps) {
  return (
    <Section
      title="Overview"
      description={stats?.sessionsNote}
      theme={theme}
      state={state}
      error={error}
      empty={!stats}
      emptyMessage="Overview statistics were not included."
      className={className}
      headingLevel={headingLevel}
    >
      {stats ? (
        <dl className="cw-stats">
          <div>
            <dt>Pageviews</dt>
            <dd>{formatCount(stats.pageviews)}</dd>
          </div>
          <div>
            <dt>Sessions</dt>
            <dd>{formatCount(stats.sessions)}</dd>
          </div>
          <div>
            <dt>Visitors</dt>
            <dd>{formatNullableCount(stats.visitors)}</dd>
            {stats.visitorsNote ? <p className="cw-note">{stats.visitorsNote}</p> : null}
          </div>
        </dl>
      ) : null}
    </Section>
  );
}