import * as React from "react";
import { Feld, Switch } 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 ReadOnlyValue() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <Feld label="Kennzeichen" value="M-AB 1234" />
        <Feld label="Erstzulassung" value="03/2022" last />
      </div>
    </Root>
  );
}

export function WithUnit() {
  return (
    <Root>
      <div style={{ width: 280 }}>
        <Feld label="Anzugsmoment" unit="Nm" last>
          <input type="number" defaultValue={120} style={{ width: 60, textAlign: "right" }} />
        </Feld>
      </div>
    </Root>
  );
}

export function WithControl() {
  const [on, setOn] = React.useState(true);
  return (
    <Root>
      <div style={{ width: 280 }}>
        <Feld label="Benachrichtigungen" last>
          <Switch checked={on} onChange={setOn} aria-label="Benachrichtigungen" />
        </Feld>
      </div>
    </Root>
  );
}