-- DreamStack Component Showcase
-- Demonstrates all component styles via variant prop

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

-- Main view  
view main = column [

  text "🧩 DreamStack Components" { variant: "title" }
  text "shadcn-inspired component registry" { variant: "subtitle" }

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

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

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

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