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

function Root({ children, height }: { children: React.ReactNode; height: number }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ position: "relative", width: "100%", height, padding: 0 }}>
      {children}
    </div>
  );
}

export function Menu() {
  return (
    <Root height={260}>
      <Popup open onClose={() => {}} variant="menu" anchor="center">
        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
        <PopupMenuItem onClick={() => {}}>Foto entfernen</PopupMenuItem>
        <PopupMenuItem onClick={() => {}} destructive>
          Fahrzeug löschen
        </PopupMenuItem>
      </Popup>
    </Root>
  );
}

export function Form() {
  return (
    <Root height={280}>
      <Popup open onClose={() => {}} variant="form" anchor="center">
        <label className="ads-label">Gültig bis</label>
        <input type="date" defaultValue="2026-12-31" />
      </Popup>
    </Root>
  );
}