// src/components/about_us_card/About_us_card.js
import React, { useState } from "react";
import "./About_us_card.css";

function About_Us_Card({ cards }) {

  const [reverse, setReverse] = useState(false);
  const [extraClass, setExtraClass] = useState('');
  return (
    <section className="About_us_card">
      {cards?.data?.map((card, index) => (
        <>
          < div key={index} className={About_us_card_holder } >
            <div className="row">
              <div
                className={`col-md-8 col-sm-8  ${index % 2 == 0 ? "order-sm-2 order-2" : "order-sm-1 order-2"
                  }`}
              >
                <div className="text_holder">
                  <div>
                    <h4 className="heading_text">{card.name}</h4>
                    <p>{card.subname}</p>
                  </div>
                </div>
              </div>
              <div
                className={`col-md-4 col-sm-4 col-6 ${index % 2 == 0 ? "order-sm-1 order-1" : "order-sm-2 order-1"
                  }`}
              >
                <div className="img_holder">
                  <img
                    className="About_us_card_img"
                    src={process.env.NEXT_PUBLIC_IMG_URL + card.image}
                    alt="About_us_card_img"
                  />
                </div>
              </div>
            </div>
          </div>
        </>
      ))
      }
    </section >
  );
}

export default About_Us_Card;