import { html, LitElement, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import "@supersoniks/concorde/core/components/ui/card/card-header";
import "@supersoniks/concorde/core/components/ui/card/card-main";
import "@supersoniks/concorde/core/components/ui/card/card-footer";
import { typesBg } from "../_css/type";

const tagName = "sonic-card";
@customElement(tagName)
export class Card extends LitElement {
  static styles = [
    typesBg,
    css`
      * {
        box-sizing: border-box;
      }
      :host {
        --sc-_padding: 1.5rem;
        --sc-_color: var(--sc-base-content, #000);
        --sc-_bg: var(--sc-base, #fff);
        --sc-_rounded: var(--sc-rounded-lg);
        --sc-_shadow: var(--sc-shadow-lg);
        -webkit-print-color-adjust: exact;
      }

      @media print {
        :host {
          page-break-inside: avoid;
          break-inside: avoid;
          box-shadow: none !important;
          border: 1px solid var(--sc-base-200, rgba(0, 0, 0, 0.12));
        }
      }

      :host {
        display: block;
        padding: var(--sc-_padding);
        background-color: var(--sc-_bg);
        border-radius: var(--sc-_rounded);
        box-shadow: var(--sc-_shadow);
        color: var(--sc-_color);
      }
    `,
  ];

  /**
   * Le type change surtout la couleur composant
   */
  @property({ type: String, reflect: true })
  type:
    | "light"
    | "primary"
    | "warning"
    | "danger"
    | "success"
    | "info"
    | "neutral"
    | "invert"
    | "base" = "base";

  render() {
    return html`<slot></slot> `;
  }
}