package components

import "fmt"

type ModalProps struct {
	ID      string
	Title   string
	Open    bool
	Content templ.Component
}

templ Modal(props ModalProps) {
	<div
		class="fixed inset-0 z-50 max-w-xl items-center justify-center mx-auto"
		id={ props.ID }
		x-data={ `{ open: ` + fmt.Sprintf("%t", props.Open) + ` }` }
		x-show="open"
		role="dialog"
		aria-modal="true"
		aria-labelledby="modal-title"
	>
		<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
		<div class="flex min-h-full items-center justify-center p-4 pointer-events-none">
			<div class={ "relative bg-base-100 rounded-lg w-full pointer-events-auto" }>
				<div class="flex justify-between items-center p-4 border-b">
					<h2 class="font-bold text-lg" id="modal-title">{ props.Title }</h2>
					<button type="button" class="btn btn-ghost" @click="open = false">✕</button>
				</div>
				<div class="p-4">
					if props.Content != nil {
						@props.Content
					}
				</div>
			</div>
		</div>
	</div>
}

templ ModalContainer() {
	<div id="modal-container"></div>
}