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

// figma node: 9472:3137 Component 13 (6 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "variant=" + __venc(p.variant) + '|' + "hover=" + __venc(p.hover);

export function Component13(_p = {}) {
  const props = { ..._p, variant: _p.variant ?? "4", hover: _p.hover ?? true };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 66,
      height: 66,
      borderRadius: 33,
      background: "linear-gradient(90deg, rgb(51,71,91) 0.00%, rgb(81,111,144) 100.00%)",
      boxShadow: "0px 2px 6px 0px rgba(0,0,0,0.1), 0px 4px 16px 0px rgba(0,0,0,0.2)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        transform: "matrix(0.906,-0.423,0.423,0.906,21.040,33.077)",
        transformOrigin: "0 0",
        width: 26.4,
        opacity: 0,
        display: "flex",
        flexDirection: "column",
        padding: "0px 7.702px 0px 7.697px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
            position: "relative",
            height: 11.001,
            flexShrink: 0,
            alignSelf: "stretch",
            width: "auto",
          }}>{props.icon1 ?? <Component1 variant={"73"} />}</div>
      </div>
      <div style={{
        position: "absolute",
        left: 6.6,
        top: 16.5,
        width: 52.8,
        display: "flex",
        flexDirection: "column",
        padding: "0px 8.800px 0px 8.800px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 33,
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
                position: "relative",
                width: 35.2,
                flexShrink: 0,
                alignSelf: "stretch",
                height: "auto",
              }}>{props.icon2 ?? <Component1 variant={"74"} />}</div>
          </div>
        </div>
      </div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 60.34,
      height: 60.34,
      borderRadius: 30.170000076293945,
      background: "linear-gradient(90deg, rgb(51,71,91) 0.00%, rgb(81,111,144) 100.00%)",
      boxShadow: "0px 1px 4px 0px rgba(0,0,0,0.1), 0px 2px 12px 0px rgba(0,0,0,0.2)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        transform: "matrix(0.906,-0.423,0.423,0.906,19.230,30.246)",
        transformOrigin: "0 0",
        width: 24.14,
        opacity: 0,
        display: "flex",
        flexDirection: "column",
        padding: "0px 7.044px 0px 7.043px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
            position: "relative",
            height: 10.053,
            flexShrink: 0,
            alignSelf: "stretch",
            width: "auto",
          }}>{props.icon1 ?? <Component1 variant={"73"} />}</div>
      </div>
      <div style={{
        position: "absolute",
        left: 6.03,
        top: 15.08,
        width: 48.28,
        display: "flex",
        flexDirection: "column",
        padding: "0px 8.050px 0px 8.050px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 30.17,
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
                position: "relative",
                width: 32.18,
                flexShrink: 0,
                alignSelf: "stretch",
                height: "auto",
              }}>{props.icon2 ?? <Component1 variant={"74"} />}</div>
          </div>
        </div>
      </div>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 60,
      height: 60,
      borderRadius: 30,
      background: "linear-gradient(90deg, rgb(51,71,91) 0.00%, rgb(81,111,144) 100.00%)",
      boxShadow: "0px 1px 4px 0px rgba(0,0,0,0.1), 0px 2px 12px 0px rgba(0,0,0,0.2)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        transform: "matrix(0.906,-0.423,0.423,0.906,19.120,30.074)",
        transformOrigin: "0 0",
        width: 24,
        opacity: 0,
        display: "flex",
        flexDirection: "column",
        padding: "0px 6.997px 0px 7.008px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
            position: "relative",
            height: 9.995,
            flexShrink: 0,
            alignSelf: "stretch",
            width: "auto",
          }}>{props.icon1 ?? <Component1 variant={"73"} />}</div>
      </div>
      <div style={{
        position: "absolute",
        left: 6,
        top: 15,
        width: 48,
        display: "flex",
        flexDirection: "column",
        padding: "0px 8px 0px 8px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 30,
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
                position: "relative",
                width: 32,
                flexShrink: 0,
                alignSelf: "stretch",
                height: "auto",
              }}>{props.icon2 ?? <Component1 variant={"74"} />}</div>
          </div>
        </div>
      </div>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 61.39,
      height: 61.39,
      borderRadius: 30.700000762939453,
      background: "linear-gradient(90deg, rgb(51,71,91) 0.00%, rgb(81,111,144) 100.00%)",
      boxShadow: "0px 1px 4px 0px rgba(0,0,0,0.1), 0px 2px 12px 0px rgba(0,0,0,0.2)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        transform: "matrix(0.906,-0.423,0.423,0.906,19.560,30.768)",
        transformOrigin: "0 0",
        width: 24.55,
        opacity: 0,
        display: "flex",
        flexDirection: "column",
        padding: "0px 7.157px 0px 7.162px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
            position: "relative",
            height: 10.231,
            flexShrink: 0,
            alignSelf: "stretch",
            width: "auto",
          }}>{props.icon1 ?? <Component1 variant={"73"} />}</div>
      </div>
      <div style={{
        position: "absolute",
        left: 6.14,
        top: 15.34,
        width: 49.11,
        display: "flex",
        flexDirection: "column",
        padding: "0px 8.190px 0px 8.180px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 30.69,
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
                position: "relative",
                width: 32.74,
                flexShrink: 0,
                alignSelf: "stretch",
                height: "auto",
              }}>{props.icon2 ?? <Component1 variant={"74"} />}</div>
          </div>
        </div>
      </div>
    </div>
  );
  const __impls = {
    // figma: variant=4,:hover=true
    "variant=4|hover=true": __body0,
    // figma: variant=1,:hover=false
    "variant=1|hover=false": __body1,
    // figma: variant=2,:hover=false
    "variant=2|hover=false": __body2,
    // figma: variant=3,:hover=true
    "variant=3|hover=true": __body0,
    // figma: variant=3,:hover=false
    "variant=3|hover=false": __body2,
    // figma: variant=4,:hover=false
    "variant=4|hover=false": __body3,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Component13;
