Checkbox List

"use client";

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

export interface CheckboxListItem {
  id: string;
  label: string;
  meta?: string;
}

export interface CheckboxListProps {
  title?: string;
  items?: CheckboxListItem[];
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (ids: string[]) => void;
  className?: string;
}

/** Round-checkbox to-do list (native checkboxes): bouncy mint ticks, strike-through on done, meta line, and a “x of y” counter with mini progress. */
export function CheckboxList({
  title = "Today",
  items = [
    { id: "1", label: "Reply to Lumen about the invoice", meta: "Finance" },
    { id: "2", label: "Review homepage copy", meta: "Website relaunch" },
    { id: "3", label: "Call Ana about the venue", meta: "Team retreat" },
    { id: "4", label: "Water the plants 🌱" },
  ],
  value,
  defaultValue = ["2"],
  onValueChange,
  className,
}: CheckboxListProps) {
  const [inner, setInner] = useState(defaultValue);
  const checked = value ?? inner;
  const gid = useId();
  const toggle = (id: string) => {
    const next = checked.includes(id) ? checked.filter((x) => x !== id) : [...checked, id];
    setInner(next);
    onValueChange?.(next);
  };

  return (
    <fieldset className={cn("rounded-da-lg bg-da-surface p-5 shadow-da-sm", className)}>
      <legend className="sr-only">{title}</legend>
      <div className="flex items-center justify-between" aria-hidden>
        <p className="font-da-display text-xl font-extrabold">{title}</p>
        <p className="text-sm font-semibold text-da-muted-fg">
          {checked.length} of {items.length}
        </p>
      </div>
      <div aria-hidden className="mt-2 h-1.5 overflow-hidden rounded-full bg-da-muted">
        <div
          className="h-full rounded-full bg-da-secondary-fg transition-[width] duration-(--da-duration-slow) ease-da-emphasized"
          style={{ width: `${(checked.length / items.length) * 100}%` }}
        />
      </div>
      <ul className="mt-4 space-y-1">
        {items.map((it) => {
          const on = checked.includes(it.id);
          return (
            <li key={it.id}>
              <label
                htmlFor={`${gid}-${it.id}`}
                className="flex cursor-pointer items-start gap-3 rounded-da-md p-2.5 transition-colors hover:bg-da-surface-2 has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring"
              >
                <input id={`${gid}-${it.id}`} type="checkbox" checked={on} onChange={() => toggle(it.id)} className="peer sr-only" />
                <span
                  aria-hidden
                  className={cn(
                    "mt-0.5 grid size-6 shrink-0 place-items-center rounded-full border-2 transition-all duration-(--da-duration) ease-da-emphasized",
                    on ? "scale-110 border-da-secondary-fg bg-da-secondary-fg text-da-secondary" : "border-da-border-strong",
                  )}
                >
                  {on && <Check className="size-3.5" strokeWidth={3} />}
                </span>
                <span>
                  <span className={cn("block transition-colors", on && "text-da-muted-fg line-through")}>{it.label}</span>
                  {it.meta && <span className="block text-xs text-da-muted-fg">{it.meta}</span>}
                </span>
              </label>
            </li>
          );
        })}
      </ul>
    </fieldset>
  );
}

export default CheckboxList;