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

// figma node: 9495:1114 Card/Catégorie
export function CardCatGorie(_p = {}) {
  const props = _p;
  return (
    <div className={props.className} style={{
      width: 305,
      height: 200,
      overflow: "hidden",
      borderRadius: 20,
      backgroundColor: "rgb(232,234,239)",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 305,
        height: 200,
        background: "linear-gradient(113.613deg, rgb(201,210,232) -11.09%, rgb(159,176,204) 68.26%)",
      }} />
      <div style={{
          position: "absolute",
          left: 130,
          top: 58,
          width: 44,
          height: 44,
        }}>{props.icon1 ?? <Interface8 property1={"image"} style={{ transform: "scale(1.833, 1.833)", transformOrigin: "0 0" }} />}</div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 90,
        width: 305,
        height: 110,
        background: "linear-gradient(180deg, rgba(0,0,0,0) 0.00%, rgba(0,0,0,0.75) 100.00%)",
      }} />
      <div style={{
        position: "absolute",
        left: 12,
        top: 12,
        overflow: "hidden",
        borderRadius: 100,
        backgroundColor: "rgb(75,212,153)",
        display: "flex",
        flexDirection: "row",
        padding: "4px 12px 4px 12px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 600,
          fontSize: 11,
          whiteSpace: "nowrap",
          lineHeight: "100%",
          letterSpacing: "0.040em",
          color: "rgb(255,255,255)",
          flexShrink: 0,
        }}>{props.text1 ?? "NOUVEAU"}</span>
      </div>
      <span style={{
        position: "absolute",
        left: 20,
        top: 150,
        width: 146,
        height: 22,
        fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 18,
        whiteSpace: "nowrap",
        lineHeight: "100%",
        color: "rgb(255,255,255)",
      }}>{props.text2 ?? "Vélos électriques"}</span>
      <span style={{
        position: "absolute",
        left: 20,
        top: 174,
        width: 95,
        height: 15,
        opacity: 0.85,
        fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 400,
        fontSize: 12,
        whiteSpace: "nowrap",
        lineHeight: "100%",
        color: "rgb(255,255,255)",
      }}>{props.text3 ?? "+ de 150 modèles"}</span>
    </div>
  );
}
export default CardCatGorie;
