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

const AccountDashboard = ({ className, bannerList }) => {
  const getUpperBanner = bannerList?.slice(0, 3);

  let getImage = ({banner_location, banner}) => {
    if (banner_location == "LOCAL") {
      return require(`../../assets/images/${banner}`);
    } else {
      return banner;
    }
  };

  console.log(getUpperBanner);
  return (
    <div
      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
        className || ""
      }`}
    >
      <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
        {getUpperBanner?.map((props, idx) => {

          let image = getImage(props);

          let { short_title, short_description, button_text, link_path } =
            props;

          return (
            <TopBanner
              btn={button_text}
              image={image}
              title={short_title}
              desc={short_description}
              link_path={link_path}
              key={idx}
            />
          );
        })}
      </div>
      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
        <LowerBanner />
        <LowerBanner />
      </div>
    </div>
  );
};

export default AccountDashboard;

const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
  return (
    <div className="flex flex-col shadow-md rounded-xl">
      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
        <img
          src={image}
          alt="banner-img"
          className="w-full h-full rounded-t-xl object-cover"
        />
      </Link>
      <div className="h-[7rem] rounded-b-xl bg-white">
        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
          <Link to={link_path} className="font-bold text-lg">
            {title}
          </Link>
          <Link to={link_path} className="text-sm">
            {desc}
          </Link>
        </div>
        <div className="flex justify-between w-full px-2 items-center">
          <Link to={link_path} className="text-slate-300 font-semibold">
            {btn}
          </Link>
          <button className="flex items-center justify-center gap-2">
            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
          </button>
        </div>
      </div>
    </div>
  );  
};

const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) => {
  let Image = require(`../../assets/images/offer.jpg`);
  return (
    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
      <div className="w-full flex justify-between border-b border-slate-300 p-2">
        <div className="h-[130px] flex justify-between items-center">
          <div className="px-2">
            <h3 className="text-lg font-bold">Banner Title</h3>
            <p className="text-sm">Banner description text will come follow</p>
          </div>
        </div>
        <div className="w-[150px] h-[100px]">
          <img
            src={Image}
            alt="banner-img"
            className="w-full h-full rounded-xl"
          />
        </div>
      </div>
      <div className="flex justify-between w-full px-2 items-center">
        <span className="text-slate-300 font-semibold">follow up text</span>
        <button className="flex items-center justify-center gap-2">
          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
        </button>
      </div>
    </div>
  );
};