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="flex text-black overflow-hidden">
        <div class="ml-0.15rem mr-0.2rem">
          <Image.Component
            compId={children.img1}
            class="w-2.74rem h-2.56rem object-cover"
          />
        </div>
        <div class="flex-1 mt-1rem py-0.58rem px-0.2rem mb-1.3rem border-2px border-black border-solid leading-loose">
          <Text.Component compId={children.text} />
        </div>
        <div class="absolute bottom-0 left-0">
          <Image.Component
            compId={children.imgShoe}
            class="w-3.5rem h-2.8rem object-cover"
          />
        </div>
      </div>
    );
  },
});