Margin Note: Year Against Year

"use client";

import * as React from "react";

import { MarginNote, type MarginNoteNote } from "@/components/ui/margin-note";

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const THIS_YEAR = [42, 45, 58, 61, 63, 79, 86, 91, 88, 94, 102, 131];
const LAST_YEAR = [38, 39, 41, 43, 44, 46, 47, 49, 48, 52, 55, 70];

const NOTES: MarginNoteNote[] = [
  { at: 2, title: "Annual plans", body: "Two months free on yearly billing.", delta: "+29%" },
  { at: 5, to: 7, title: "Team tier", body: "Studios moved up; the average order rose to $212.", delta: "+25%" },
  { at: 11, title: "Gift cards", body: "The best December yet, 1.9× last year's.", delta: "+87%" },
];

export function MarginNoteRevenueDemo() {
  const [run, setRun] = React.useState(0);
  return (
    <div className="w-full max-w-3xl rounded-2xl bg-stone-50 p-5 text-stone-900 ring-1 ring-stone-950/[0.08] sm:p-7 dark:bg-stone-900 dark:text-stone-100 dark:ring-white/10">
      <div className="mb-5 flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
        <div>
          <p className="text-xs font-medium text-stone-500 dark:text-stone-400">Tinta · Revenue by month</p>
          <p className="mt-1 flex items-baseline gap-2">
            <span className="text-2xl font-semibold tracking-tight tabular-nums">$940k</span>
            <span className="text-xs font-medium text-emerald-700 tabular-nums dark:text-emerald-400">+64% on 2024</span>
          </p>
        </div>
        <div className="flex items-center gap-4 text-xs text-stone-500 dark:text-stone-400">
          <span className="flex items-center gap-1.5">
            <svg width="16" height="2" aria-hidden>
              <line x1="0" y1="1" x2="16" y2="1" stroke="currentColor" strokeWidth="1.5" className="text-stone-900 dark:text-stone-100" />
            </svg>
            2025
          </span>
          <span className="flex items-center gap-1.5">
            <svg width="16" height="2" aria-hidden>
              <line x1="0" y1="1" x2="16" y2="1" stroke="currentColor" strokeWidth="1.25" strokeDasharray="3 4" opacity="0.6" />
            </svg>
            2024
          </span>
          <button
            type="button"
            onClick={() => setRun((r) => r + 1)}
            className="rounded-full px-2.5 py-1 font-medium text-stone-600 ring-1 ring-stone-950/10 transition-colors hover:bg-white hover:text-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-900 dark:text-stone-300 dark:ring-white/15 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:outline-white"
          >
            Read again
          </button>
        </div>
      </div>
      <MarginNote
        key={run}
        label="Tinta monthly revenue, 2025 against 2024"
        data={THIS_YEAR}
        compare={LAST_YEAR}
        labels={MONTHS}
        notes={NOTES}
        summary="2025 closed 64% ahead of 2024, most of it after the team tier."
        format={(value) => (value === 0 ? "$0" : `$${value}k`)}
        className="[--margin-note-accent:#047857] dark:[--margin-note-accent:#34d399]"
      />
    </div>
  );
}