import { Interface8 } from './Interface8.jsx';

// figma node: 9592:4410 Card/Service (3 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "couleur=" + __venc(p.couleur);

export function CardService(_p = {}) {
  const props = { ..._p, couleur: _p.couleur ?? "primary" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 300,
      borderRadius: 20,
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0px 4px 20px 0px rgba(0,0,0,0.05)",
      display: "flex",
      flexDirection: "column",
      gap: 20,
      padding: "40px 32px 40px 32px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 80,
        height: 80,
        overflow: "hidden",
        borderRadius: 100,
        backgroundColor: "rgb(234,242,255)",
        flexShrink: 0,
      }}>
        <div style={{
            position: "absolute",
            left: 22,
            top: 22,
            width: 36,
            height: 36,
          }}>{props.icon1 ?? <Interface8 property1={"store"} style={{ transform: "scale(1.500, 1.500)", transformOrigin: "0 0" }} />}</div>
      </div>
      <span style={{
        position: "relative",
        fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "100%",
        color: "rgb(85,89,117)",
        flexShrink: 0,
      }}>{props.text1 ?? "Nos boutiques partenaires"}</span>
      <div style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 100,
        boxShadow: "inset 0 0 0 2px rgb(44,52,119)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 0px 12px 0px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 600,
          fontSize: 14,
          whiteSpace: "nowrap",
          lineHeight: "100%",
          color: "rgb(44,52,119)",
          flexShrink: 0,
        }}>{props.text2 ?? "Trouver une boutique"}</span>
      </div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 300,
      borderRadius: 20,
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0px 4px 20px 0px rgba(0,0,0,0.05)",
      display: "flex",
      flexDirection: "column",
      gap: 20,
      padding: "40px 32px 40px 32px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 80,
        height: 80,
        overflow: "hidden",
        borderRadius: 100,
        backgroundColor: "rgb(237,251,245)",
        flexShrink: 0,
      }}>
        <div style={{
            position: "absolute",
            left: 22,
            top: 22,
            width: 36,
            height: 36,
          }}>{props.icon1 ?? <Interface8 property1={"wrench"} style={{ transform: "scale(1.500, 1.500)", transformOrigin: "0 0" }} />}</div>
      </div>
      <span style={{
        position: "relative",
        fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "100%",
        color: "rgb(85,89,117)",
        flexShrink: 0,
      }}>{props.text1 ?? "Réparer son 2 roues"}</span>
      <div style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 100,
        boxShadow: "inset 0 0 0 2px rgb(75,212,153)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 0px 12px 0px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 600,
          fontSize: 14,
          whiteSpace: "nowrap",
          lineHeight: "100%",
          color: "rgb(75,212,153)",
          flexShrink: 0,
        }}>{props.text2 ?? "Prendre rendez-vous"}</span>
      </div>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 300,
      borderRadius: 20,
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0px 4px 20px 0px rgba(0,0,0,0.05)",
      display: "flex",
      flexDirection: "column",
      gap: 20,
      padding: "40px 32px 40px 32px",
      justifyContent: "center",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: 80,
        height: 80,
        overflow: "hidden",
        borderRadius: 100,
        backgroundColor: "rgb(255,244,228)",
        flexShrink: 0,
      }}>
        <div style={{
            position: "absolute",
            left: 22,
            top: 22,
            width: 36,
            height: 36,
          }}>{props.icon1 ?? <Interface8 property1={"shield-check"} style={{ transform: "scale(1.500, 1.500)", transformOrigin: "0 0" }} />}</div>
      </div>
      <span style={{
        position: "relative",
        fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "100%",
        color: "rgb(85,89,117)",
        flexShrink: 0,
      }}>{props.text1 ?? "Assurer un deux-roues"}</span>
      <div style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 100,
        boxShadow: "inset 0 0 0 2px rgb(255,109,36)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 0px 12px 0px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 600,
          fontSize: 14,
          whiteSpace: "nowrap",
          lineHeight: "100%",
          color: "rgb(255,109,36)",
          flexShrink: 0,
        }}>{props.text2 ?? "Découvrir nos offres"}</span>
      </div>
    </div>
  );
  const __impls = {
    // figma: Couleur=Primary
    "couleur=primary": __body0,
    // figma: Couleur=Secondary
    "couleur=secondary": __body1,
    // figma: Couleur=Tertiary
    "couleur=tertiary": __body2,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default CardService;
