---
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.some((validator) => {
		if (typeof validator === 'string' && validator == 'validator-required') return true;
		if (typeof validator === 'object' && validator.validator == 'validator-required') return true;
		return false;
	});
---

{
	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>