import * as React from "react";
import { StatusRow } 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 AllStatuses() {
  return (
    <Root>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, width: 260 }}>
        <StatusRow status="ok" title="Reifendruck" subtitle="Alle vier in Ordnung" />
        <StatusRow status="warn" title="Ölstand" subtitle="Nächster Wechsel in 800 km" />
        <StatusRow status="bad" title="Batterie" subtitle="Spannung niedrig" />
      </div>
    </Root>
  );
}

export function Clickable() {
  return (
    <Root>
      <div style={{ width: 260 }}>
        <StatusRow status="warn" title="Service fällig" subtitle="Tippen für Details" onClick={() => {}} />
      </div>
    </Root>
  );
}