"use client";

import { Switch as SwitchPrimitive } from "@base-ui/react/switch";

import { cn } from "./cn";

/*
 * The primitive is load-bearing here: a switch is a checkbox to assistive
 * technology but a track-and-thumb to everyone else, and Base UI supplies the
 * role, the hidden native input for forms, and keyboard toggling.
 *
 * Checked uses the brand accent rather than the primary action, matching the
 * checkbox — this is a selection state, and the two tokens differ in GoodSync.
 */

export interface SwitchProps
  extends Omit<SwitchPrimitive.Root.Props, "className"> {
  className?: string;
}

function Switch({ className, ...props }: SwitchProps) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer relative inline-flex shrink-0 items-center rounded-full",
        /*
         * Invisible pointer target, centred on the track and never smaller
         * than it. `max()` against the geometry tokens rather than a fixed
         * inset, so the guarantee holds whatever size a brand gives the track
         * -- an inset tuned to one size silently stops being enough at
         * another. Against the tokens and not `100%`: a percentage resolves
         * against the padding box, which the transparent border makes 2px
         * narrower than the switch you can see.
         */
        "after:absolute after:top-1/2 after:left-1/2",
        "after:-translate-x-1/2 after:-translate-y-1/2",
        "after:h-[max(var(--switch-height),var(--switch-hit-area-min))]",
        "after:w-[max(var(--switch-width),var(--switch-hit-area-min))]",
        "h-(--switch-height) w-(--switch-width)",
        "border border-transparent bg-(color:--color-action-neutral)",
        "transition-colors duration-(--motion-duration) ease-(--motion-ease)",
        "outline-none focus-visible:outline-solid",
        "focus-visible:outline-(length:--focus-ring-width)",
        "focus-visible:outline-(color:--color-focus-ring)",
        "focus-visible:outline-offset-2",
        "data-checked:bg-(color:--color-brand-accent)",
        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "pointer-events-none block rounded-full",
          "size-(--switch-thumb-size) bg-(color:--color-surface)",
          "transition-transform duration-(--motion-duration) ease-(--motion-ease)",
          "translate-x-0.5 data-checked:translate-x-[calc(var(--switch-width)-var(--switch-thumb-size)-0.125rem)]",
        )}
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };