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

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

    return () => (
      <div class="relative flex px-17.5px pt-20px text-black overflow-hidden">
        <div class="ml-7.5px mr-10px">
          <Image.Component
            compId={children.img1}
            class="w-137px h-148px object-cover"
          />
        </div>

        <Text.Component
          class="flex-1 mt-50px py-29px mb-65px border-2px border-black border-solid leading-loose"
          compId={children.text}
        />
        <div class="absolute bottom-5px left-17.5px">
          <Image.Component
            compId={children.imgShoe}
            class="w-175px h-140px object-cover"
          />
        </div>
      </div>
    );
  },
});
