/components/progress/progress

import { progress } from "@hedia/hexui/components/progress";
import { prose } from "@hedia/hexui/components/prose";
import { div, p } from "@hedia/html/elements";

export function Colors() {
  return [
    div(prose(p("Primary (default)")), progress({ value: 1, max: 6, color: "primary" })),
    div(prose(p("Base")), progress({ value: 1, max: 3, color: "base" })),
    div(prose(p("Green")), progress({ value: 45, max: 100, color: "green" })),
    div(prose(p("Yellow")), progress({ value: 8, max: 10, color: "yellow" })),
    div(prose(p("Red")), progress({ value: 100, max: 100, color: "red" })),
  ];
}

export function Indeterminate() {
  return div(prose(p("Indeterminate (no value)")), progress({ max: 100 }));
}

export function Sizes() {
  return [
    div(prose(p("Small")), progress({ value: 5, max: 10, size: "sm" })),
    div(prose(p("Medium (default)")), progress({ value: 5, max: 10, size: "md" })),
    div(prose(p("Large")), progress({ value: 5, max: 10, size: "lg" })),
  ];
}