import * as React from "react";
import { PopupMenuItem } 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
        className="ads-popup ads-popup--menu"
        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
      >
        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
        <PopupMenuItem onClick={() => {}}>Details anzeigen</PopupMenuItem>
      </div>
    </Root>
  );
}

export function Destructive() {
  return (
    <Root>
      <div
        className="ads-popup ads-popup--menu"
        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
      >
        <PopupMenuItem onClick={() => {}}>Bearbeiten</PopupMenuItem>
        <PopupMenuItem onClick={() => {}} destructive>
          Löschen
        </PopupMenuItem>
      </div>
    </Root>
  );
}