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

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

    return () => (
      <div>
        <Title3.Component compId={children.title} />
        <div class="flex">
          <div class="">
            <Image.Component
              class="overflow-hidden"
              style={{
                width: designToNaturalSize(250),
                height: designToNaturalSize(278),
              }}
              compId={children.bgImg}
            />
          </div>
          <div
            class="flex flex-col justify-center"
            style={{ marginLeft: designToNaturalSize(49) }}
          >
            <Text.Component compId={children.text1} />
          </div>
        </div>
      </div>
    );
  },
});
