import * as React from "react";
import { cn } from "@/lib/utils";

interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
  label?: string;
  error?: boolean;
}

export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
  ({ className, label, error, disabled, ...props }, ref) => (
    <label className={cn("inline-flex items-center gap-2 cursor-pointer", disabled && "opacity-50 cursor-not-allowed")}>
      <div className="relative">
        <input
          ref={ref}
          type="checkbox"
          disabled={disabled}
          className="sr-only"
          {...props}
        />
        <div
          className={cn(
            "h-5 w-9 rounded-full transition-colors duration-150",
            "peer-checked:bg-(--color-accent)",
            error ? "bg-(--color-danger)" : "bg-(--color-border)",
            "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-(--color-accent) peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-(--color-bg)",
            disabled && "opacity-50"
          )}
        />
        <div
          className={cn(
            "absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform duration-150",
            "peer-checked:translate-x-4",
            disabled && "opacity-50"
          )}
        />
      </div>
      {label && <span className="text-sm text-(--color-ink)">{label}</span>}
    </label>
  )
);
Switch.displayName = "Switch";