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 } = useCompData(props.compId);

    return () => (
      <div class={cx(rootStyles, "overflow-hidden")}>
        <div class="bg flex flex-col"></div>
        <div class="relative z-1 overflow-hidden">
          <div class="mt-0.4rem h-1.2rem text-30px text-center text_main">
            <Text.Component compId={children.title.id} />
          </div>
          <div class="h-10.22rem mt-10px flex flex-1">
            <div class="ml-0.64rem">
              <Image.Component
                compId={children.img1.id}
                class="w-4.5rem h-10.22rem object-cover"
              />
            </div>
            <div class="ml-0.3rem flex flex-col justify-between">
              <Image.Component
                compId={children.img2.id}
                class="w-1.67rem h-3.06rem object-cover"
              />
              <Image.Component
                compId={children.img3.id}
                class="w-1.67rem h-2.08rem object-cover"
              />
            </div>
          </div>
        </div>
        <div class="absolute top-5rem right-1.1rem text-stroke-dark-900 z-2">
          <Text.Component compId={children.text1?.id} />
          <Text.Component
            class="mt-1rem text-right"
            compId={children.text2?.id}
          />
          <div class="line"></div>
        </div>
      </div>
    );
  },
});

const rootStyles = css`
  .bg {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 9.28rem;
    background-image: linear-gradient(to right, #000 59%, #fff 59%);
  }
  .text_main {
    color: #fff;
    background-image: linear-gradient(to right, #000 59%, #fff 59%);
    font-size: 0.8rem;
    span {
      color: #fff;
      mix-blend-mode: difference;
      text-transform: uppercase;
    }
  }
  .line {
    height: 1px;
    background: linear-gradient(to left, #000 1.2rem, #fff 1.2rem);
  }
`;