import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { cn } from "@/lib/utils"

type SettingsFieldProps = {
  label: string
  description?: string
  htmlFor?: string
  children: React.ReactNode
  span?: "half" | "full"
  className?: string
}

export function SettingsField({
  label,
  description,
  htmlFor,
  children,
  span = "half",
  className,
}: SettingsFieldProps) {
  return (
    <Field
      className={cn(
        span === "full" && "sm:col-span-2",
        className
      )}
    >
      <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
      <FieldContent>
        {children}
        {description ? (
          <FieldDescription>{description}</FieldDescription>
        ) : null}
      </FieldContent>
    </Field>
  )
}