import { Label } from "../../components/ui/label";
import { Switch } from "../../components/ui/switch";
import { useFieldContext } from ".";

type SwitchField = {
	trueLabel: string;
	falseLabel: string;
};

export const SwitchField = ({
	trueLabel = "True",
	falseLabel = "False",
}: SwitchField) => {
	const field = useFieldContext<boolean>();

	const checked = field.state.value ?? false;

	return (
		<div className="flex items-center space-x-2">
			<Switch
				id={field.name}
				checked={checked}
				onCheckedChange={field.handleChange}
				onBlur={field.handleBlur}
			/>
			<Label htmlFor={field.name}>{checked ? trueLabel : falseLabel}</Label>
		</div>
	);
};