import React, { useState } from "react";
import "./Home_banner.css";
import Green_round_btn from "../../../common-components/common_btn/green_round_btn/Green_round_btn";
import Cancel_Reason_Modal from "../../../common-components/common_modal/cancel_reason_modal/Cancel_Reason_Modal";
import { useNavigate } from "react-router-dom";
import ScrollAnimation from "react-animate-on-scroll";

function Home_banner({ val }) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/categories");
  };

  return (
    <>
      {/* <ScrollAnimation animateIn="zoomIn"  animatePreScroll={true} > */}
      <div className="home-banner" onClick={handleClick}>
        <div className="container-fluid p-0">
          <div className="img_holder">
            <img
              src={process.env.NEXT_PUBLIC_IMG_URL + val?.image}
              className="banner-img"
              alt="banner-img-1"
            />
          </div>
        </div>
        {/* <div className="content_holder">
          <div className="container-fluid">
            <div className="text_holder">
              <h3>{val?.name}</h3>
               <h2></h2>
                <h1></h1>
                <p></p>
              <h2>FREE-GRAZING</h2>
              <h1>DESI COWS</h1>
              <p>Slow-Cooked & Hand-Churned. Just the Way Nature Intended</p>
            </div>
            <div className="btn_holder">
              <Green_round_btn btnText="ORDER NOW" onClick={handleClick} />
            </div>
          </div>
        </div> */}
      </div>
      {/* </ScrollAnimation> */}
    </>
  );
}

export default Home_banner;
