import * as React from "react";
import { Seg } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
      {children}
    </div>
  );
}

export function TwoOptions() {
  const [value, setValue] = React.useState<"nacht" | "tag">("nacht");
  return (
    <Root>
      <Seg
        options={[
          { value: "nacht", label: "Nacht" },
          { value: "tag", label: "Tag" },
        ]}
        value={value}
        onChange={setValue}
      />
    </Root>
  );
}

export function ThreeOptions() {
  const [value, setValue] = React.useState("woche");
  return (
    <Root>
      <Seg
        options={[
          { value: "tag", label: "Tag" },
          { value: "woche", label: "Woche" },
          { value: "monat", label: "Monat" },
        ]}
        value={value}
        onChange={setValue}
      />
    </Root>
  );
}