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

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { designToNaturalSize } = useEditor().helper;
    const { value, 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" compId={children.text1.id} />
            </div>
            <div class="flex justify-center">
                <Image.Component 
                            style={{
                                width: designToNaturalSize(368),
                                height: designToNaturalSize(275),
                            }}
                            compId={children.bgImg.id}  />
            </div>
        </div>
    );
  },
});
const upStyle = css`
  position:relative;
`