Icon / Dot Buttons

"use client";

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

/**
 * Mirrors DotIndicator — a raw <button>, not built on the base Button.
 * Active dot: bg-primary-70, inactive:
 * bg-gray-300 (Tailwind's own default gray step — this platform's brand
 * gray scale only overrides gray-10..130, so un-overridden default steps
 * like 300 still resolve to stock Tailwind gray).
 */
export function DotIndicatorDemo() {
  const [selected, setSelected] = useState(0);
  const dots = [0, 1, 2, 3];

  return (
    <div className="flex items-center gap-2">
      {dots.map((index) => (
        <button
          key={index}
          type="button"
          aria-label={`Go to slide ${index + 1}`}
          onClick={() => setSelected(index)}
          className={cn(
            "h-3 w-3 rounded-full transition-colors",
            index === selected ? "bg-primary-70" : "bg-gray-300",
          )}
        />
      ))}
    </div>
  );
}