class DS::Toggle < DesignSystemComponent
  attr_reader :id, :name, :checked, :disabled, :checked_value, :unchecked_value, :opts

  def initialize(id:, name: nil, checked: false, disabled: false, checked_value: "1", unchecked_value: "0", **opts)
    @id = id
    @name = name
    @checked = checked
    @disabled = disabled
    @checked_value = checked_value
    @unchecked_value = unchecked_value
    @opts = opts
  end

  def label_classes
    class_names(
       "relative block w-9 h-5 cursor-pointer",
       "rounded-full bg-surface-inset",
       # `motion-safe:` gates the bg + thumb-translate transitions on
       # `prefers-reduced-motion`; reduced-motion users get a snap.
       "motion-safe:transition-colors motion-safe:duration-300",
       "after:content-[''] after:block after:bg-white after:absolute after:rounded-full",
       "after:top-0.5 after:left-0.5 after:w-4 after:h-4",
       "motion-safe:after:transition-transform motion-safe:after:duration-300 motion-safe:after:ease-in-out",
       "peer-checked:bg-success peer-checked:after:translate-x-4",
       # Focus ring driven from the sr-only input via `peer-focus-visible:`.
       # Offset places the ring outside the track so it lands on the
       # surrounding chrome regardless of theme.
       "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
       "peer-focus-visible:ring-alpha-black-300 theme-dark:peer-focus-visible:ring-alpha-white-300",
       "peer-disabled:opacity-70 peer-disabled:cursor-not-allowed"
    )
  end
end