import { Component, inject, input } from '@angular/core'
import { CheckboxGroupComponent } from './checkbox-group.component'

@Component({
	selector: 'kadi-checkbox',
	template: `
		<div
			class="flex items-center"
			(click)="toggleCheck()">
			<input
				class="mr-2"
				type="checkbox"
				[checked]="isChecked()" />
			<ng-content />
		</div>
	`,
	standalone: false,
})
export class CheckboxComponent {
	private checkboxGroup = inject(CheckboxGroupComponent, { host: true })

	readonly value = input<unknown>()

	toggleCheck() {
		this.checkboxGroup.addOrRemove(this.value())
	}

	isChecked() {
		return this.checkboxGroup.contains(this.value())
	}
}