import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../../..";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { designToNaturalSize } = useEditor().helper;
    const { children } = useCompData(props.compId);

    return () => (
      <div class="relative w-full">
        <div class="!absolute w-full h-full flex justify-center items-center">
          <Text.Component class="!absolute w-full tracking-5px" compId={children.text1} />
        </div>
        <div class="flex justify-center">
          <Image.Component
            style={{
              width: designToNaturalSize(368),
              height: designToNaturalSize(275),
            }}
            compId={children.bgImg}
          />
        </div>
      </div>
    );
  },
});