"use client";

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

interface ToggleProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
}

export function Toggle({
  checked,
  onChange,
  disabled,
  className,
}: ToggleProps) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
        "relative h-[19px] w-[34px] shrink-0 rounded-xl border-none transition-colors",
        checked ? "bg-primary" : "bg-border",
        disabled && "opacity-50",
        className
      )}
    >
      <span
        className={cn(
          "absolute top-0.5 h-[15px] w-[15px] rounded-full bg-white transition-all",
          checked ? "left-[17px]" : "left-0.5"
        )}
      />
    </button>
  );
}