import CardServiceStyle from "@styles/cards/tems-card-service.scss?inline";
import { css, html, LitElement, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";

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>`;
  }
}