import * as React from "react";
import { ProgressBar } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
      {children}
    </div>
  );
}

export function SingleFill() {
  return (
    <Root>
      <div style={{ width: 260 }}>
        <ProgressBar percent={68} />
      </div>
    </Root>
  );
}

export function SegmentedWithLegend() {
  return (
    <Root>
      <div style={{ width: 260 }}>
        <ProgressBar
          segments={[
            { value: 4, color: "var(--ok)", label: "Kraftstoff" },
            { value: 2, color: "var(--warn)", label: "Verschleiß" },
            { value: 1, color: "var(--bad)", label: "Wartung" },
          ]}
        />
      </div>
    </Root>
  );
}

export function SingleSegmentNoLegend() {
  return (
    <Root>
      <div style={{ width: 260 }}>
        <ProgressBar segments={[{ value: 1, color: "var(--fg)" }]} showLegend={false} />
      </div>
    </Root>
  );
}