import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
const style = {
  Container: {
    borderRadius: "var(--sl-border-radius-large)",
    color: "var(--sl-color-neutral-900)",
    background: "var(--sl-color-neutral-0)",
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-small)",
    padding: "16px",
    cursor: "pointer",
  },
  TitleContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: "var(--sl-spacing-small)",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
    :host{
      display: block;   
    }
    * {
        p {
            margin: 0;
        }
    }
    sl-checkbox::part(base) {

        position: absolute;
        top: 16px;
        right: 16px;
    }
    sl-checkbox::part(control) {
        border-radius: 50%;
    }
    sl-checkbox[checked]::part(control){
      background-color: var(--sqm-input-border-color-focus);
    }

    sl-checkbox[checked]::part(checked-icon){
      color: var(--sqm-input-background);
    }
  `;
export const RadioCardView = ({ title, icon, description, selected, }) => {
  const border = selected
    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
  return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
      border,
    } },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("sl-checkbox", { checked: selected }),
    h("div", { part: "sqm-title-container", class: sheet.classes.TitleContainer },
      h("sl-icon", { name: icon }),
      h("p", null, title)),
    h("p", null, description)));
};
