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-0.65rem pr-0.35rem pt-0.3rem text-black")}>
        <div class="relative mb-0.4rem flex items-center justify-start">
          <Text.Component
            compId={children.title}
            class="relative -ml-0.1rem z-10 bg-light-50"
          />
          <div class="absolute left-0 top-1/2 w-5.1rem 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-5.1rem top-3rem z-10 card_color">
            <div
              class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
              style={{
                backgroundColor: value.themeColor,
              }}
            >
              <Text.Component
                compId={children.colorText}
                class="min-w-1.25rem bg-light-50"
              />
            </div>
          </div>
          <Image.Component
            compId={children.img1}
            class="-ml-0.28rem w-6.22rem h-6.22rem object-cover"
          />
          <div class="relative flex justify-end mt-0.5rem pb-0.35rem">
            <Text.Component
              compId={children.text}
              class="w-4.75rem py-0.3rem bg-light-50 border-dark-200 border-2 border-solid leading-loose"
            />
            <Image.Component
              compId={children.img2}
              class="!absolute bottom-0 left-0 -ml-0.28rem w-4rem h-2.85rem object-cover"
            />
          </div>
        </div>
      </div>
    );
  },
});

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