"use client";

import { Clock, Hash, Pilcrow, Type } from "lucide-react";
import type { MarkdownStats } from "@/lib/markdown";
import { formatNumber } from "@/lib/utils";

type Props = {
  stats: MarkdownStats;
  saved: boolean;
  draftName?: string;
};

export function EditorStatusBar({ stats, saved, draftName }: Props) {
  return (
    <div
      role="status"
      aria-live="polite"
      className="no-print flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border/60 bg-background/80 px-3 py-1.5 text-xs text-muted-foreground"
    >
      {draftName ? (
        <span className="flex items-center gap-1.5">
          <span className="font-medium text-foreground">{draftName}</span>
          <span aria-hidden>·</span>
          <span className={saved ? "text-emerald-500" : "text-amber-500"}>
            {saved ? "Saved" : "Saving…"}
          </span>
        </span>
      ) : null}
      <Stat icon={<Type aria-hidden className="h-3.5 w-3.5" />} label="Words">
        {formatNumber(stats.words)}
      </Stat>
      <Stat icon={<Hash aria-hidden className="h-3.5 w-3.5" />} label="Characters">
        {formatNumber(stats.characters)}
      </Stat>
      <Stat icon={<Pilcrow aria-hidden className="h-3.5 w-3.5" />} label="Paragraphs">
        {formatNumber(stats.paragraphs)}
      </Stat>
      <Stat icon={<Clock aria-hidden className="h-3.5 w-3.5" />} label="Reading time">
        {stats.readingTimeMinutes} min
      </Stat>
    </div>
  );
}

function Stat({
  icon,
  label,
  children,
}: {
  icon: React.ReactNode;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <span className="flex items-center gap-1.5" title={label}>
      {icon}
      <span className="text-foreground">{children}</span>
      <span className="sr-only">{label}</span>
    </span>
  );
}