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

// figma node: 9490:1097 Module/Header/Desktop
export function ModuleHeaderDesktop(_p = {}) {
  const props = _p;
  return (
    <div className={props.className} style={{
      width: 1280,
      height: 72,
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0px 2px 10px 0px rgba(0,0,0,0.05)",
      display: "flex",
      flexDirection: "row",
      padding: "16px 80px 16px 80px",
      justifyContent: "space-between",
      alignItems: "center",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        backgroundColor: "rgb(255,255,255)",
        display: "flex",
        flexDirection: "row",
        gap: 32,
        alignItems: "center",
        flexWrap: "nowrap",
        flexShrink: 0,
      }}>
        <div style={{
          position: "relative",
          backgroundColor: "rgb(255,255,255)",
          display: "flex",
          flexDirection: "row",
          gap: 8,
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 700,
            fontSize: 22,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(44,52,119)",
            flexShrink: 0,
          }}>{props.text1 ?? "BeeToGreen"}</span>
        </div>
        <div style={{
          position: "relative",
          backgroundColor: "rgb(255,255,255)",
          display: "flex",
          flexDirection: "row",
          gap: 28,
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 500,
            fontSize: 16,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(85,89,117)",
            flexShrink: 0,
          }}>{props.text2 ?? "Produits"}</span>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 500,
            fontSize: 16,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(85,89,117)",
            flexShrink: 0,
          }}>{props.text3 ?? "Services"}</span>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 500,
            fontSize: 16,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(85,89,117)",
            flexShrink: 0,
          }}>{props.text4 ?? "Nos boutiques"}</span>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(75,212,153)",
            flexShrink: 0,
          }}>Promo</span>
        </div>
      </div>
      <div style={{
        position: "relative",
        backgroundColor: "rgb(255,255,255)",
        display: "flex",
        flexDirection: "row",
        gap: 16,
        alignItems: "center",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          width: 220,
          overflow: "hidden",
          borderRadius: 100,
          backgroundColor: "rgb(246,246,246)",
          display: "flex",
          flexDirection: "row",
          gap: 10,
          padding: "10px 18px 10px 18px",
          alignItems: "center",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
              position: "relative",
              width: 18,
              flexShrink: 0,
              alignSelf: "stretch",
              height: "auto",
            }}>{props.icon1 ?? <Interface8 property1={"search"} />}</div>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            lineHeight: "100%",
            color: "rgb(189,195,204)",
            flexGrow: 1,
          }}>Rechercher</span>
        </div>
        <div style={{
          position: "relative",
          overflow: "hidden",
          borderRadius: 100,
          backgroundColor: "rgb(234,242,255)",
          boxShadow: "inset 0 0 0 1px rgb(225,234,250)",
          display: "flex",
          flexDirection: "row",
          gap: 8,
          padding: "9px 16px 9px 14px",
          alignItems: "center",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          flexShrink: 0,
        }}>
          <div style={{
              position: "relative",
              width: 16,
              height: 16,
              flexShrink: 0,
            }}>{props.icon2 ?? <Interface8 property1={"zap"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
          <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,
          }}>Mes aides : 1 200 €</span>
        </div>
        <div style={{
          position: "relative",
          overflow: "hidden",
          borderRadius: 100,
          background: "linear-gradient(90deg, rgb(44,52,119) 0.00%, rgb(34,40,90) 100.00%)",
          display: "flex",
          flexDirection: "row",
          gap: 8,
          padding: "10px 20px 10px 18px",
          alignItems: "center",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
              position: "relative",
              width: 18,
              flexShrink: 0,
              alignSelf: "stretch",
              height: "auto",
            }}>{props.icon3 ?? <Interface8 property1={"phone"} />}</div>
          <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,255,255)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>Contact</span>
        </div>
        <div style={{
          position: "relative",
          width: 40,
          overflow: "hidden",
          borderRadius: 100,
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
            position: "absolute",
            left: 9,
            top: 9,
            width: 22,
            height: 22,
            borderRadius: "50%",
            boxShadow: "inset 0 0 0 1.600px rgb(85,89,117)",
          }} />
          <span style={{
            position: "absolute",
            left: 16,
            top: 13,
            width: 8,
            height: 16,
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 13,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(85,89,117)",
          }}>?</span>
        </div>
        <div style={{
          position: "relative",
          width: 40,
          overflow: "hidden",
          borderRadius: 100,
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
              position: "absolute",
              left: 9,
              top: 9,
              width: 22,
              height: 22,
            }}>{props.icon4 ?? <Interface8 property1={"shopping-cart"} style={{ transform: "scale(0.917, 0.917)", transformOrigin: "0 0" }} />}</div>
          <div style={{
            position: "absolute",
            left: 22,
            top: 4,
            width: 18,
            height: 18,
            borderRadius: "50%",
            backgroundColor: "rgb(255,109,36)",
          }} />
          <span style={{
            position: "absolute",
            left: 27,
            top: 8,
            width: 4,
            height: 12,
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 10,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(255,255,255)",
          }}>1</span>
        </div>
        <div style={{
          position: "relative",
          width: 40,
          overflow: "hidden",
          borderRadius: 100,
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <div style={{
              position: "absolute",
              left: 9,
              top: 9,
              width: 22,
              height: 22,
            }}>
            <Interface8
              style={{ transform: "scale(0.917, 0.917)", transformOrigin: "0 0" }}
              property1={"user"}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
export default ModuleHeaderDesktop;
