import { Image } from "@queenjs/ui";
import { defineUI } from "queenjs";
import { object } from "vue-types";

export default defineUI({
  props: {
    data: object<{
      url: string;
      fileType: "image" | "video";
    }>().isRequired,
  },
  setup(props) {
    return () => {
      const { data } = props;
      return (
        <div class="min-h-400px text-center">
          {data.fileType == "image" && (
            <Image
              size={1000}
              src={data.url}
              class="max-w-1/1 max-h-800px"
              // style={{
              // backgroundColor: "#e1e5e8",
              // }}
            />
          )}
          {data.fileType == "video" && (
            <video
              controls
              src={data.url}
              class="max-w-1/1 max-h-800px min-h-200px"
            />
          )}
        </div>
      );
    };
  },
});