import * as React from "react";
import { SwipeRow, 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 Closed() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <SwipeRow onDelete={() => {}} deleteLabel="Löschen">
          <LeafRow title="Fahrt nach Hause" subTitle="Heute, 08:12" value="12 km" />
        </SwipeRow>
      </div>
    </Root>
  );
}

export function SwipedOpen() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <SwipeRow onDelete={() => {}} deleteLabel="Löschen" swiped>
          <LeafRow title="Fahrt zur Arbeit" subTitle="Gestern, 17:40" value="18 km" />
        </SwipeRow>
      </div>
    </Root>
  );
}