import * as React from "react";
import { ImagePlaceholder } 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 Empty() {
  return (
    <Root>
      <ImagePlaceholder alt="Fahrzeugfoto" label="Kein Foto" hint="foto.jpg" />
    </Root>
  );
}

export function Mini() {
  return (
    <Root>
      <ImagePlaceholder alt="Vorschau" label="Kein Foto" size="mini" />
    </Root>
  );
}

export function Round() {
  return (
    <Root>
      <ImagePlaceholder alt="Profilbild" label="Kein Bild" size="round" />
    </Root>
  );
}