-- DreamStack TodoMVC
-- Dynamic list with add, remove, and reactive count

import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"

let todos = ["Learn DreamStack", "Build something amazing", "Ship it"]
let newTodo = ""
let completedCount = 0

view main = column [
  text "📝 DreamStack Todos" { variant: "title" }
  text "Add, remove, and manage your tasks" { variant: "subtitle" }

  -- Add new todo
  Card { title: "New Todo", subtitle: "type and press Add" } [
    row [
      input { bind: newTodo, placeholder: "What needs to be done?" }
      button "Add" { click: todos.push(newTodo), variant: "primary" }
    ]
  ]

  -- Todo list
  Card { title: "Todo List", subtitle: "click × to remove" } [
    each todo in todos ->
      row [
        text "•"
        text todo
        button "×" { click: todos.remove(_idx), variant: "ghost" }
      ]
  ]

  -- Footer
  row [
    Badge { label: "ITEMS", variant: "info" }
    button "Clear All" { click: todos = [], variant: "ghost" }
  ]
]