// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1142-22299&m=dev
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";

import CardServiceStyle from "@styles/cards/tems-card-service.scss?inline";

import "@components/shared/ui/tems-division";
import "@components/buttons/tems-button";
import "@components/cards/tems-card-catalog";

export type TemsCardServiceProps = {
  imgLeft?: string;
  imgRight?: string;
  header?: string;
  content?: string;
};

@customElement("tems-card-service")
export class TemsCardService extends LitElement {
  static styles = css`
    ${unsafeCSS(CardServiceStyle)}
  `;

  @property({ attribute: "header", type: String })
  header: TemsCardServiceProps["header"];

  @property({ attribute: "content", type: String })
  content: TemsCardServiceProps["content"];

  @property({ attribute: "img-left", type: String })
  imgLeft: TemsCardServiceProps["imgLeft"];

  @property({ attribute: "img-right", type: String })
  imgRight: TemsCardServiceProps["imgRight"];

  render() {
    return html`<div>
      ${
        this.imgLeft
          ? html`<div
            class="imgLeft"
            style="background-image: url(${this.imgLeft})"
          ></div>`
          : nothing
      }
      <div>
        <tems-card-catalog
          type="vertical"
          header=${this.header ? this.header : nothing}
          content=${this.content ? this.content : nothing}
          ><div><slot></slot></div
        ></tems-card-catalog>
      </div>
      ${
        this.imgRight
          ? html`<div
            class="imgRight"
            style="background-image: url(${this.imgRight})"
          ></div>`
          : nothing
      }
    </div>`;
  }
}