// Neon Typography Components
// Semantic text components with automatic theme token integration.
import { Theme } from "../theme.slint";

// ── NeonH1 ───────────────────────────────────────────────────────
export component NeonH1 {
    in property <string> text;
    in property <color> color: Theme.text-primary;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-3xl; font-weight: 700; } }
}

// ── NeonH2 ───────────────────────────────────────────────────────
export component NeonH2 {
    in property <string> text;
    in property <color> color: Theme.text-primary;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-2xl; font-weight: 700; } }
}

// ── NeonH3 ───────────────────────────────────────────────────────
export component NeonH3 {
    in property <string> text;
    in property <color> color: Theme.text-primary;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-xl; font-weight: 700; } }
}

// ── NeonH4 ───────────────────────────────────────────────────────
export component NeonH4 {
    in property <string> text;
    in property <color> color: Theme.text-muted;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-lg; font-weight: 600; } }
}

// ── NeonH5 ───────────────────────────────────────────────────────
export component NeonH5 {
    in property <string> text;
    in property <color> color: Theme.text-muted;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-base; font-weight: 600; } }
}

// ── NeonH6 ───────────────────────────────────────────────────────
export component NeonH6 {
    in property <string> text;
    in property <color> color: Theme.text-dim;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-xs; font-weight: 600; } }
}

// ── NeonBody ─────────────────────────────────────────────────────
export component NeonBody {
    in property <string> text;
    in property <color> color: Theme.text-primary;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-base; font-weight: 400; wrap: word-wrap; } }
}

// ── NeonBodySmall ────────────────────────────────────────────────
export component NeonBodySmall {
    in property <string> text;
    in property <color> color: Theme.text-muted;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-sm; font-weight: 400; wrap: word-wrap; } }
}

// ── NeonCaption ──────────────────────────────────────────────────
export component NeonCaption {
    in property <string> text;
    in property <color> color: Theme.text-dim;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-xs; font-weight: 400; } }
}

// ── NeonCode ─────────────────────────────────────────────────────
export component NeonCode {
    in property <string> text;
    in property <color> color: Theme.neon-cyan;
    in property <color> bg: Theme.bg-surface;
    Rectangle {
        border-radius: Theme.radius-sm;
        background: root.bg;
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 2px;
        padding-bottom: 2px;
        Text { text: root.text; color: root.color; font-size: Theme.font-sm; font-weight: 500; font-family: Theme.font-mono; }
    }
}

// ── NeonMuted ────────────────────────────────────────────────────
export component NeonMuted {
    in property <string> text;
    in property <color> color: Theme.text-muted;
    Rectangle { Text { text: root.text; color: root.color; font-size: Theme.font-sm; font-weight: 400; } }
}
