import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function HomeBannerOffersCard(props) {
  const [imageUrl, setImageUrl] = useState("");
  const link_result = "/" + props.itemData.link_path;

  useEffect(() => {
    let { banner, banner_location } = props?.itemData;
    if (banner_location === "LOCAL") {
      const imagePath = require(`../../assets/images/${banner}`);
      setImageUrl(imagePath);
    } else if (banner_location === "URL") setImageUrl(banner);
    else return null;
  }, []);

  return (
    <Link
      // to={link_result}
      to={link_result == '/blog-page' ? `${link_result}?blog_id=${props.itemData.blog_id}` : `${link_result}`}
      className="item p-2 w-full flex items-center min-h-[340px] bg-alice-blue bg-cover bg-center"
      style={{
        backgroundImage: `url('${imageUrl}')`,
      }}
    >
      <div className="w-[80%] h-full mx-auto flex flex-col justify-between">
        <div className="content flex justify-between items-center">
          <div className="mb-2">
            <h1 className="text-2xl lg:text-4xl font-bold text-dark-gray dark:text-white tracking-wide">
              <span className="heroSilderTitle">{props.itemData.title}</span>
            </h1>
          </div>
        </div>
        <div className="flex flex-col justify-around items-center flex-1">
          <div className="siderCardDescription mb-2">
            {props.itemData.description}
          </div>
          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
             {props.itemData.button_text}
          </button>
        </div>
      </div>
    </Link>
  );
}