import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export type SwitchProps = {
  checked?: boolean;
  label?: ReactNode;
  onChange?: (checked: boolean) => void;
};

export function Switch({ checked = false, label, onChange }: SwitchProps) {
  return (
    <label className="inline-flex items-center gap-3">
      <button
        aria-pressed={checked}
        className={cn(
          "relative inline-flex h-7 w-12 items-center rounded-[var(--uhuru-radius-full)] border transition",
          checked
            ? "border-[var(--uhuru-border-strong)] bg-[var(--uhuru-action-primary)]"
            : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-bg-muted)]",
        )}
        onClick={() => onChange?.(!checked)}
        type="button"
      >
        <span
          className={cn(
            "absolute left-1 h-5 w-5 rounded-full bg-[var(--uhuru-surface-default)] transition",
            checked ? "translate-x-5" : "translate-x-0",
          )}
        />
      </button>
      {label ? <span className="text-sm text-[var(--uhuru-text-primary)]">{label}</span> : null}
    </label>
  );
}