---
import type { FormControl } from '../core';

export interface Props {
	control: FormControl;
	showValidationHints: boolean;
	showErrors?: boolean; // feature flag for showing validation errors
}

const { control, showValidationHints } = Astro.props;

const { validators = [] } = control;

const isRequired: boolean = showValidationHints && validators.includes('validator-required');
---

{
	control.label && control.type !== "checkbox" && (
		<label for={control.id} data-validation-required={isRequired ? "true" : null}>
			{control.label}
		</label>
	)
}

<slot />

{
	control.label && control.type === "checkbox" && (
		<label for={control.id} data-validation-required={isRequired ? "true" : null}>
			{control.label}
		</label>
	)
}

<style>
	label[data-validation-required="true"]::before {
		content: "*";
	}
</style>