import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { HomepageBannerData } from "@/lib/db-data";
import {
  offers as mockOffers,
  scooters as mockScooters,
  type Offer,
  type Scooter,
} from "@/lib/mock-data";

type OffersBannerProps = {
  offers?: Offer[];
  scooters?: Scooter[];
  homepageBanner?: HomepageBannerData | null;
  homeBannerScooterId?: string | null;
  homeBannerProductImage?: string | null;
};

export function OffersBanner({
  offers = mockOffers,
  scooters = mockScooters,
  homepageBanner,
  homeBannerScooterId,
  homeBannerProductImage,
}: OffersBannerProps) {
  const spotlight = offers[0];
  const cmsScooter = scooters.find((item) => item.id === homeBannerScooterId);
  const scooter = cmsScooter ?? scooters.find((item) => item.id === spotlight?.scooterId) ?? scooters[0];
  const fallbackImage =
    homeBannerProductImage ||
    scooter?.heroImage ||
    scooter?.posterImage ||
    scooter?.thumbnailImage ||
    null;

  if (homepageBanner?.imageUrl && homepageBanner.isActive) {
    return (
      <section className="bg-white py-3">
        <div className="container-custom">
          {homepageBanner.ctaUrl ? (
            <a
              href={homepageBanner.ctaUrl}
              className="block overflow-hidden rounded-[1.25rem] border border-border/80 shadow-soft transition hover:opacity-95"
            >
              <img
                src={homepageBanner.imageUrl}
                alt={homepageBanner.altText || "Homepage offer banner"}
                className="h-auto w-full object-cover"
              />
            </a>
          ) : (
            <div className="overflow-hidden rounded-[1.25rem] border border-border/80 shadow-soft">
              <img
                src={homepageBanner.imageUrl}
                alt={homepageBanner.altText || "Homepage offer banner"}
                className="h-auto w-full object-cover"
              />
            </div>
          )}
        </div>
      </section>
    );
  }

  return (
    <section className="bg-white py-3">
      <div className="container-custom">
        <div className="overflow-hidden rounded-[1.25rem] bg-gradient-to-r from-primary-deep via-cyan-600 to-ev p-6 text-white shadow-soft md:p-8">
          <div className="grid items-center gap-6 md:grid-cols-[1fr_0.75fr]">
            <div>
              <h2 className="text-2xl font-bold">Special Offers</h2>
              <p className="mt-3 max-w-md text-sm leading-6 text-blue-50">
                Exchange offers and seasonal cashback on select models.
              </p>
              <Button className="mt-5" href="/offers" variant="secondary">
                View Offers <ArrowRight className="h-4 w-4" />
              </Button>
            </div>
            {scooter ? (
              <img
                src={fallbackImage ?? scooter.thumbnailImage}
                alt={scooter.name}
                className="mx-auto aspect-[4/3] w-full max-w-[14rem] object-contain drop-shadow-2xl"
              />
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}