import * as React from "react";
import { Tile, Fig } 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: 240 }}>
        <Tile>
          <div className="ads-label">Reichweite</div>
          <Fig value={312} unit="km" size={28} />
        </Tile>
      </div>
    </Root>
  );
}

export function Flat() {
  return (
    <Root>
      <div style={{ width: 240 }}>
        <Tile variant="flat">Zusatzinformation ohne Rahmenschatten</Tile>
      </div>
    </Root>
  );
}

export function ButtonWithChevron() {
  return (
    <Root>
      <div style={{ width: 240 }}>
        <Tile variant="button" chevron onClick={() => {}}>
          Alle Fahrten anzeigen
        </Tile>
      </div>
    </Root>
  );
}