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

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

export function Default() {
  return (
    <Root>
      <ProgressRing percent={64} unit="%" label="Ladestand" />
    </Root>
  );
}

export function CustomValue() {
  return (
    <Root>
      <ProgressRing percent={82} value="312" unit="km" label="Reichweite" />
    </Root>
  );
}

export function Low() {
  return (
    <Root>
      <ProgressRing percent={12} unit="%" label="Kraftstoff" />
    </Root>
  );
}

export function Small() {
  return (
    <Root>
      <ProgressRing percent={45} unit="%" size={90} />
    </Root>
  );
}