import React from "react";
import "./Common_Heading_Holder.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faPaw } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";

function Common_Heading_Holder({
  data,
  headingText,
  viewShowAllButton,
  subtext,
  goto,
}) {
  const navigate = useRouter();

  return (
    <>
      <section className="Common_Heading_Holder">
        <div className="h4ppos">
          <h4>
            {headingText} <FontAwesomeIcon icon={faPaw} />
          </h4>

          <p className="subtext">{subtext}</p>
        </div>

        {viewShowAllButton && (
          <div
            className="show_all_text"
            onClick={() => {
              navigate.push(goto);
            }}
          >
            <p>
              View All{" "}
              <FontAwesomeIcon icon={faAngleRight} className="righticon" />
            </p>
          </div>
        )}
      </section>
    </>
  );
}

export default Common_Heading_Holder;
