'use client'

import { Toggle } from '../components/ui/Toggle.js'

export interface ToggleFieldProps {
  label: string
  value?: boolean
  onChange: (value: boolean) => void
  helpText?: string
}

export function ToggleField({ label, value = false, onChange, helpText }: ToggleFieldProps) {
  return (
    <div className="flex items-center justify-between">
      <div>
        <span className="text-sm font-medium">{label}</span>
        {helpText && <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p>}
      </div>
      <Toggle checked={value} onCheckedChange={onChange} aria-label={label} />
    </div>
  )
}
