import Image from "next/image";
import Link from "next/link";
import { ResourceCard } from "@/components/resources/ResourceCard";
import { ArrowRight } from "@/components/ui/Icons";
import { revealProps, staggerDelay } from "@/components/ui/reveal";
import { diagnosticCardStill } from "@/content/media";
import type { ResourceSlug, ResourceSummary } from "@/content/types";
import { cn } from "@/lib/cn";

interface ResourcesPreviewProps {
  resources: ResourceSummary[];
  readTimes?: Partial<Record<ResourceSlug, number>>;
}

/** Editorial grid on desktop, swipeable row on phones. */
export function ResourcesPreview({ resources, readTimes = {} }: ResourcesPreviewProps) {
  const [feature, ...rest] = resources;

  return (
    <ul className="scroll-row -mx-5 mt-14 flex gap-4 overflow-x-auto px-5 pb-2 sm:-mx-8 sm:px-8 md:mx-0 md:grid md:grid-cols-2 md:gap-5 md:overflow-visible md:px-0 md:pb-0 lg:mt-20 xl:grid-cols-4">
      <li className="w-[86%] shrink-0 md:col-span-2 md:w-auto xl:row-span-2" {...revealProps()}>
        <ResourceCard resource={feature} readMinutes={readTimes[feature.slug]} feature />
      </li>
      {rest.map((resource, index) => (
        <li
          key={resource.slug}
          className={cn("w-[86%] shrink-0 md:w-auto", index === rest.length - 1 && "xl:col-span-2")}
          {...revealProps(staggerDelay(index + 1))}
        >
          <ResourceCard resource={resource} readMinutes={readTimes[resource.slug]} />
        </li>
      ))}
      <li className="hidden xl:col-span-2 xl:block" {...revealProps(staggerDelay(rest.length + 1))}>
        <Link
          href="/#growth-diagnostic"
          className="group relative isolate flex h-full flex-col justify-between overflow-hidden rounded-lg bg-ink p-8 text-paper transition-transform duration-500 ease-out-expo hover:-translate-y-1"
        >
          <Image
            src={diagnosticCardStill.src}
            alt=""
            fill
            sizes="640px"
            placeholder="blur"
            className={cn(
              "-z-10 object-cover transition-transform duration-700 ease-out-expo group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
              diagnosticCardStill.position,
            )}
          />
          <span
            aria-hidden="true"
            className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgb(13_13_17/0.9)_0%,rgb(13_13_17/0.62)_48%,rgb(13_13_17/0.12)_100%)]"
          />
          <span className="text-label uppercase text-night-muted">Not sure where to start?</span>
          <span className="mt-10 flex items-end justify-between gap-6">
            <span className="text-display-md">Take the five-question growth diagnostic.</span>
            <ArrowRight size={22} className="btn-arrow mb-2 shrink-0" />
          </span>
        </Link>
      </li>
    </ul>
  );
}