import * as React from "react";
import { LeafRow } 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 }}>
        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
      </div>
    </Root>
  );
}

export function List() {
  return (
    <Root>
      <div style={{ width: 280, display: "flex", flexDirection: "column", gap: 2 }}>
        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
        <LeafRow title="Sommerreifen" subTitle="Hinten" value="3,8 mm" onClick={() => {}} />
        <LeafRow title="Winterreifen" subTitle="Eingelagert" value="6,1 mm" subValue="seit Mai" onClick={() => {}} />
      </div>
    </Root>
  );
}