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(rootStyles, "pl-32.5px pr-17.5px pt-15px text-black")}>
        <div class="relative mb-20px flex items-center justify-start">
          <Text.Component
            compId={children.title}
            class="relative -ml-5px z-10 bg-light-50"
          />
          <div class="absolute left-0 top-1/2 w-255px h-3/2 border-solid border-dark-200 border-1 border-b-0 border-l-0"></div>
        </div>
        <div
          class="relative"
          style={{
            backgroundImage: `linear-gradient(${value.themeColor} 87%, #fff 87%)`,
          }}
        >
          <div class="absolute left-255px top-150px z-10 card_color">
            <div
              class="p-4px pt-50px border-light-50 border-4px border-top-3px border-solid"
              style={{
                backgroundColor: value.themeColor,
              }}
            >
              <Text.Component
                compId={children.colorText}
                class="min-w-62.5px bg-light-50"
              />
            </div>
          </div>
          <Image.Component
            compId={children.img1}
            class="-ml-14px w-311px h-311px object-cover"
          />
          <div class="relative flex justify-end mt-25px pb-17.5px">
            <Text.Component
              compId={children.text}
              class="w-237.5px py-15px bg-light-50 border-dark-200 border-2 border-solid leading-loose"
            />
            <Image.Component
              compId={children.img2}
              class="!absolute bottom-0 left-0 -ml-14px w-200px h-142.5px object-cover"
            />
          </div>
        </div>
      </div>
    );
  },
});

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