Action Card

"use client";

import { useState } from "react";
import { Check, Leaf, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ActionCardProps {
  title?: string;
  description?: string;
  saving?: string;
  cost?: string;
  impact?: 1 | 2 | 3;
  effort?: 1 | 2 | 3;
  defaultAdded?: boolean;
  onAddedChange?: (added: boolean) => void;
  className?: string;
}

/** Reduction action card: serif title, description, saving and cost figures, leaf-rated impact/effort, and an “Add to plan” pill that toggles to a sage “In your plan” state. */
export function ActionCard({
  title = "Switch offices to green electricity",
  description = "Move your two offices to a certified renewable tariff. Usually cost-neutral within a year.",
  saving = "−42 tCO₂e / yr",
  cost = "≈ €0 – €600 / yr",
  impact = 3,
  effort = 1,
  defaultAdded = false,
  onAddedChange,
  className,
}: ActionCardProps) {
  const [added, setAdded] = useState(defaultAdded);
  const leaves = (n: number) => [1, 2, 3].map((i) => <Leaf key={i} aria-hidden className={cn("size-3.5", i <= n ? "fill-current" : "opacity-30")} />);
  const word = { 1: "low", 2: "medium", 3: "high" } as const;
  return (
    <article
      className={cn(
        "da-transition flex max-w-sm flex-col rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-sm",
        added && "ring-2 ring-da-primary",
        className,
      )}
    >
      <h3 className="font-da-display text-2xl leading-tight">{title}</h3>
      <p className="mt-2 text-da-muted-fg">{description}</p>
      <dl className="mt-5 grid grid-cols-2 gap-3 text-sm">
        <div className="rounded-da-md bg-da-accent p-3 text-da-accent-fg">
          <dt className="opacity-80">Saving</dt>
          <dd className="mt-0.5 font-da-mono font-medium">{saving}</dd>
        </div>
        <div className="rounded-da-md bg-da-surface-2 p-3">
          <dt className="text-da-muted-fg">Cost</dt>
          <dd className="mt-0.5 font-da-mono">{cost}</dd>
        </div>
      </dl>
      <p className="mt-4 flex flex-wrap gap-x-5 gap-y-1 text-sm">
        <span className="inline-flex items-center gap-1.5 text-da-primary">
          <span className="flex">{leaves(impact)}</span>
          <span className="text-da-fg">{word[impact]} impact</span>
        </span>
        <span className="inline-flex items-center gap-1.5 text-da-muted-fg">
          <span className="flex">{leaves(effort)}</span>
          <span className="text-da-fg">{word[effort]} effort</span>
        </span>
      </p>
      <button
        type="button"
        aria-pressed={added}
        onClick={() => {
          setAdded(!added);
          onAddedChange?.(!added);
        }}
        className={cn(
          "da-focus da-transition mt-6 inline-flex h-11 items-center justify-center gap-2 rounded-da-pill font-medium",
          added ? "bg-da-primary text-da-primary-fg" : "bg-da-accent text-da-accent-fg hover:brightness-95",
        )}
      >
        {added ? <Check aria-hidden className="size-4" /> : <Plus aria-hidden className="size-4" />}
        {added ? "In your plan" : "Add to plan"}
      </button>
    </article>
  );
}

export default ActionCard;