import * as React from "react";
import { RowList } 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 Default() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <RowList
          items={[
            { key: "km", label: "Kilometerstand", value: "42.318 km" },
            { key: "verbrauch", label: "Ø Verbrauch", value: "6,8 l/100km" },
            { key: "letzte", label: "Letzte Fahrt", value: "12 km", subValue: "vor 2 Stunden" },
          ]}
        />
      </div>
    </Root>
  );
}

export function WithSubValues() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <RowList
          items={[
            { key: "vorne", label: "Solldruck vorne", value: "2,3 bar", subValue: "kalt gemessen" },
            { key: "hinten", label: "Solldruck hinten", value: "2,1 bar", subValue: "kalt gemessen" },
          ]}
        />
      </div>
    </Root>
  );
}
