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-20px h-60px text-30px text-center text_main">
            <Text.Component compId={children.title} />
          </div>
          <div class="h-511px mt-10px flex flex-1">
            <div class="ml-32px">
              <Image.Component
                compId={children.img1}
                class="w-22.5px h-511px object-cover"
              />
            </div>
            <div class="ml-15px flex flex-col justify-between">
              <Image.Component
                compId={children.img2}
                class="w-83.5px h-153px object-cover"
              />
              <Image.Component
                compId={children.img3}
                class="w-83.5px h-104px object-cover"
              />
            </div>
          </div>
        </div>
        <div class="absolute top-250px right-55px text-stroke-dark-900 z-2">
          <Text.Component compId={children.text1} />
          <Text.Component class="mt-50px text-right" compId={children.text2} />
          <div class="line"></div>
        </div>
      </div>
    );
  },
});

const rootStyles = css`
  .bg {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 464px;
    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: 40px;
    span {
      color: #fff;
      mix-blend-mode: difference;
      text-transform: uppercase;
    }
  }
  .line {
    height: 1px;
    background: linear-gradient(to left, #000 60px, #fff 60px);
  }
`;
