import {
    Field,
    FieldContent,
    FieldDescription,
    FieldLabel,
    FieldTitle,
} from "@/components/ui/field"
import { Switch } from "../ui/switch"

type SwitchFieldRef = {
    title: string,
    description?: string,
    checked: boolean,
    onChecked: (value: boolean) => void,
    disabled?: boolean
}


export default function SwitchField({ title, description, checked, onChecked, disabled }: SwitchFieldRef) {

    return (
        <FieldLabel className="has-data-[state=checked]:border-border has-data-[state=checked]:bg-transparent dark:has-data-[state=checked]:bg-transparent">
            <Field orientation="horizontal" >
                <FieldContent className="gap-0">
                    <FieldTitle >{title}</FieldTitle>
                    {description && <FieldDescription>{description}</FieldDescription>}
                </FieldContent>
                <Switch checked={checked} onCheckedChange={(value) => onChecked(value)} disabled={disabled} />
            </Field>
        </FieldLabel>
    )
}
