import React from "react";
import "./Our_objectives.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPaw, faHeart, faBone } from "@fortawesome/free-solid-svg-icons";

const Our_objective = ({ visionmission }) => {
  return (
    <section className="Our_Objectives">
      <div className="container">
        <div className="section_heading text-center">
          <span>OUR PURPOSE</span>

          <h2>Vision & Mission</h2>

          <p>
            Everything we do is inspired by one simple goal — helping pets live
            happier, healthier lives.
          </p>
        </div>

        <div className="vision_mission_wrapper">
          {visionmission && visionmission.length > 0 ? (
            visionmission.map((item, index) => (
              <div
                className={`objective_box ${
                  index === 0 ? "vision_box" : "mission_box"
                }`}
                key={item?.id || index}
              >
                <div className="card_shape"></div>

                <div className="objective_icon">
                  <FontAwesomeIcon icon={index === 0 ? faPaw : faBone} />
                </div>

                <div className="objective_number">
                  {String(index + 1).padStart(2, "0")}
                </div>

                <span className="small_title">{item?.name}</span>

                <h3>{item?.subname}</h3>

                <div className="orange_line"></div>

                <p>{item?.description}</p>

                <div className="bottom_icon">
                  <FontAwesomeIcon icon={index === 0 ? faHeart : faPaw} />
                </div>
              </div>
            ))
          ) : (
            <div className="col-12 text-center py-4">
              <p className="mb-0">No Vision and Mission data found.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default Our_objective;
