-- DreamStack Component Showcase
-- Demonstrates all component styles

-- State
let name = ""
let count = 0

-- Main view  
view main = column [

  text "🧩 DreamStack Components" { class: "ds-card-title" }
  text "shadcn-inspired component registry" { class: "ds-card-subtitle" }

  -- Button Variants
  text "Button Variants" { class: "ds-card-title" }
  row [
    button "Primary" { class: "ds-btn-primary" }
    button "Secondary" { class: "ds-btn-secondary" }
    button "Ghost" { class: "ds-btn-ghost" }
    button "Destructive" { class: "ds-btn-destructive" }
  ]

  -- Badge Variants  
  text "Badge Variants" { class: "ds-card-title" }
  row [
    text "SUCCESS" { class: "ds-badge ds-badge-success" }
    text "WARNING" { class: "ds-badge ds-badge-warning" }  
    text "ERROR" { class: "ds-badge ds-badge-error" }
    text "INFO" { class: "ds-badge ds-badge-info" }
    text "DEFAULT" { class: "ds-badge ds-badge-default" }
  ]

  -- Input with live binding
  text "Input Component" { class: "ds-card-title" }
  text "Name" { class: "ds-input-label" }
  input { bind: name, placeholder: "Type your name..." }
  text "Hello, {name}!"

  -- Interactive counter
  text "Interactive Counter" { class: "ds-card-title" }
  row [
    button "Count: {count}" { click: count += 1, class: "ds-btn-primary" }
    button "Reset" { click: count = 0, class: "ds-btn-ghost" }
  ]
]