import { css, cx } from "@linaria/core";
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, value } = useCompData(props.compId);

    return () => (
      <div class={cx("relative pt-15px text-black overflow-hidden", rootStyles)}>
        <div class="flex justify-end items-center relative mb-20px">
          <div class="absolute right-0 top-1/2 h-3/2 w-250px border-dark-300 border-1 border-solid border-r-0 border-b-0"></div>
          <Text.Component
            compId={children.text}
            class="relative z-10 bg-light-50 pr-10px"
          />
        </div>
        <div class="relative">
          <Image.Component
            compId={children.img1}
            class="w-311px h-311px object-cover mx-auto"
          />
          <div class="absolute right-250px top-150px card_color z-2">
            <div
              class="border-light-50 border-4px border-top-3px border-solid p-4px pt-50px"
              style={{
                backgroundColor: value.themeColor,
              }}
            >
              <Text.Component
                compId={children.text2}
                class="min-w-75px bg-light-50"
              />
            </div>
          </div>
        </div>
      </div>
    );
  },
});

const rootStyles = css`
  .card_color {
    transform: translateX(50%);
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 100%;
      width: 1px;
      height: 150px;
      background-color: #fff;
    }
  }
`;
