Square Switch

"use client";

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

export interface SquareSwitchProps {
  label?: string;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

/** Square toggle: a hairline rectangle with a square knob that snaps across with the emphasized ease, filling ink when on; mono ON/OFF state label; role=switch. */
export function SquareSwitch({ label = "Show project index", defaultChecked = true, onCheckedChange, className }: SquareSwitchProps) {
  const [on, setOn] = useState(defaultChecked);
  return (
    <label className={cn("flex cursor-pointer items-center justify-between gap-6 border-b border-da-border py-4", className)}>
      <span>{label}</span>
      <span className="flex items-center gap-3">
        <span aria-hidden className="w-6 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">
          {on ? "On" : "Off"}
        </span>
        <button
          type="button"
          role="switch"
          aria-checked={on}
          onClick={() => {
            setOn(!on);
            onCheckedChange?.(!on);
          }}
          className={cn(
            "da-focus relative h-5 w-10 border border-da-border-strong transition-colors duration-(--da-duration)",
            on ? "bg-da-fg" : "bg-transparent",
          )}
        >
          <span
            className={cn(
              "absolute top-0.5 left-0.5 size-3.5 transition-[translate,background-color] duration-(--da-duration-slow) ease-da-emphasized motion-reduce:transition-none",
              on ? "translate-x-5 bg-da-bg" : "bg-da-fg",
            )}
          />
        </button>
      </span>
    </label>
  );
}

export default SquareSwitch;