import { useState } from "react";
import { Link } from "@tanstack/react-router";
import { dismissProNudge } from "~/fns/pro";
import { useAction } from "~/hooks/use-action";
import { Panel } from "~/ui/Panel";

/**
 * A quiet card at the bottom of the dashboard sidebar. One link, one "Not now" that hides it for six
 * months; it never interrupts anything and supporters never see it.
 */
export function ProNudge() {
  const [hidden, setHidden] = useState(false);
  const dismiss = useAction(dismissProNudge, { invalidate: false });
  if (hidden) return null;
  return (
    <Panel>
      <div className="space-y-2 p-4 text-sm">
        <p className="text-kumo-default">
          Enjoying gitfor?{" "}
          <span className="text-kumo-subtle">Pro gives you more room to build, and keeps the lights on.</span>
        </p>
        <div className="flex items-center gap-3">
          <Link to="/pricing" className="font-medium text-kumo-link hover:underline">
            See what Pro adds
          </Link>
          <button
            type="button"
            className="text-kumo-subtle hover:text-kumo-default"
            onClick={() => {
              setHidden(true);
              void dismiss.run({});
            }}
          >
            Not now
          </button>
        </div>
      </div>
    </Panel>
  );
}