"use client";

import { useQuery } from "@tanstack/react-query";
import Image from "next/image";

import ImageWithFallback from "@/components/common/ImageWithFallback";
import { getLandingPageData } from "@/services/subscription.service";
import config from "@/utils/config";

const defaultImage = config.APP_CONFIG.DEFAULT_IMG;
const cdn = config.ENV_VARS.CDN_URL;

const storeLogos = [
  "apple",
  "lowes",
  "amazon",
  "best_buy",
  "ebay",
  "kohls",
  "walmart",
  "target",
  "chewy",
  "adidas",
  "sephora",
  "the_home_depot",
];

type Landing5StoresSectionProps = {
  publisher_domain?: string;
};

export default function Landing5StoresSection({
  publisher_domain = "",
}: Landing5StoresSectionProps) {
  const { data } = useQuery({
    queryKey: ["landingPage", publisher_domain],
    queryFn: () => getLandingPageData(publisher_domain),
  });

  const apiStores = Object.values(data?.premium_brands || {});

  return (
    <section className="py-5 section-stores" id="stores">
      <div className="container py-md-3 text-center">
        <div className="row text-center mb-4 mb-md-5">
          <div className="col-12 col-md-10 col-lg-9 col-xl-8 mx-auto">
            <h2 className="fw-bold section-title">
              Save on Free Shipping at All Your Favorite Stores
            </h2>
            <p className="text-muted mb-0">
              Your Rebates Plus Membership gives you access to shipping rebates
              on future eligible purchases, helping you save at the stores you
              already shop.
            </p>
          </div>
        </div>
        <div className="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-4 align-items-center justify-content-center store-grid">
          {apiStores.length > 0
            ? apiStores.slice(0, 12).map((store: any, index: number) => (
              <div key={index} className="col">
                <div className="p-0 ">
                  <ImageWithFallback
                    src={store?.img || defaultImage}
                    alt={store?.store || "store"}
                    width={140}
                    height={80}
                    style={{
                      width: "100%",
                      height: "auto",
                      objectFit: "contain",
                    }}
                    fallback={defaultImage}
                  />
                </div>
              </div>
            ))
            : storeLogos.map((store) => (
              <div key={store} className="col">
                <div className="store-pill">
                  <Image
                    src={`${cdn}/assets/img/logos/${store}.svg`}
                    alt={store.replace(/_/g, " ")}
                    width={120}
                    height={40}
                    className="store-logo"
                  />
                </div>
              </div>
            ))}
        </div>
      </div>
    </section>
  );
}