import {nanoid} from 'nanoid'
import "./habit-group"
import "./habit-item"
import "./habit-adder"

tag dopamine-box
	prop habits = [{name: "Clean Up", done: true, id: nanoid()}]
	
	def completeAll
		for habit in habits
			habit.done = true
	
	def resetAll
		for habit in habits
			habit.done = false
	
	def handleHabitAdded e
		const newHabit = {name: e.detail, done: false, id:nanoid()}
		habits.push(newHabit)
	
	css self d:vflex g:10px
		div.controls d:flex jc:space-between
		button bgc:transparent td@hover:underline fs:xs color:blue5 cursor:pointer
			
	<self>
		<habit-group habits=habits>
		
		<div.controls>
			<button @click=completeAll> "Complete All"
			<button @click=resetAll> "Reset All"
		
		<habit-adder @habitAdded=handleHabitAdded>	
		

imba.mount <dopamine-box>