Toggle Chips

"use client";

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

export interface ToggleChipsOption {
  value: string;
  label: string;
  emoji?: string;
}

export interface ToggleChipsProps {
  options?: ToggleChipsOption[];
  /** Allow several chips at once. */
  multiple?: boolean;
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  "aria-label"?: string;
  className?: string;
}

/** Row of pill toggle chips with emoji; selected chips fill with periwinkle and show a popping check. Single or multiple selection. */
export function ToggleChips({
  options = [
    { value: "design", label: "Design", emoji: "🎨" },
    { value: "dev", label: "Development", emoji: "💻" },
    { value: "marketing", label: "Marketing", emoji: "📣" },
    { value: "ops", label: "Operations", emoji: "⚙️" },
    { value: "sales", label: "Sales", emoji: "🤝" },
  ],
  multiple = true,
  value,
  defaultValue = ["design", "dev"],
  onValueChange,
  "aria-label": ariaLabel = "Teams",
  className,
}: ToggleChipsProps) {
  const [inner, setInner] = useState(defaultValue);
  const selected = value ?? inner;
  const toggle = (v: string) => {
    const next = selected.includes(v) ? selected.filter((x) => x !== v) : multiple ? [...selected, v] : [v];
    setInner(next);
    onValueChange?.(next);
  };

  return (
    <div role="group" aria-label={ariaLabel} className={cn("flex flex-wrap gap-2", className)}>
      {options.map((o) => {
        const on = selected.includes(o.value);
        return (
          <button
            key={o.value}
            type="button"
            aria-pressed={on}
            onClick={() => toggle(o.value)}
            className={cn(
              "da-focus inline-flex h-11 items-center gap-2 rounded-da-pill px-4 text-[15px] font-medium transition-[background-color,color,scale] duration-(--da-duration) ease-da-emphasized active:scale-95",
              on ? "bg-da-primary text-da-primary-fg" : "bg-da-surface-2 hover:bg-da-muted",
            )}
          >
            {on ? (
              <span className="grid size-5 place-items-center rounded-full bg-da-primary-fg/25 transition-[scale] duration-(--da-duration) ease-da-emphasized starting:scale-0">
                <Check aria-hidden className="size-3" strokeWidth={3} />
              </span>
            ) : (
              o.emoji && <span aria-hidden>{o.emoji}</span>
            )}
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

export default ToggleChips;