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="pt-0.2rem px-0.68rem pr-0.35rem">
        <div class="flex justify-end relative pb-0.22rem  z-10">
          <div class="absolute left-0 bottom-0 z-10">
            <Image.Component
              compId={children.imgShoe}
              class="w-3.5rem h-2.6rem object-cover"
            />
          </div>
          <Image.Component
            compId={children.img1}
            class="w-4rem h-3.3rem object-cover"
          />
        </div>
        <div class="relative">
          <div class="absolute right-7px top-0 w-10px h-1rem bg-white z-1"></div>
          <Text.Component
            compId={children.text}
            class="-mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose"
          />
        </div>
      </div>
    );
  },
});
