import type { JSX } from 'react'
import { Checkbox } from '@overdeck/deck-ui'
import type { HookControlId } from '../../lib/collector-types'

export function HookControlToggle({
  id, label, hint, enabled, pending, error, onEnabledChange,
}: {
  id: HookControlId
  label: string
  hint: string
  enabled: boolean
  pending: boolean
  error?: string
  onEnabledChange(enabled: boolean): void
}): JSX.Element {
  return (
    <div>
      <Checkbox
        id={`hook-control-${id}`}
        label={label}
        hint={hint}
        error={error}
        checked={enabled}
        disabled={pending}
        onCheckedChange={onEnabledChange}
      />
      {error !== undefined && <p className="sr-only" role="alert">{error}</p>}
    </div>
  )
}