import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "@/components/ui/Icons";
import { resourceStills } from "@/content/media";
import type { ResourceSummary } from "@/content/types";
import { cn } from "@/lib/cn";
import { routes } from "@/lib/routes";

/** Photographic cover over the guide's model tone (shown while the image loads). Decorative. */
export function ResourceCover({ resource, feature = false }: { resource: ResourceSummary; feature?: boolean }) {
  const tone =
    resource.models.length > 1 ? "bg-paper-deep" : resource.models[0] === "saas" ? "bg-mist" : "bg-sand";
  const still = resourceStills[resource.slug];

  return (
    <div
      aria-hidden="true"
      className={cn(
        "relative overflow-hidden",
        tone,
        feature ? "aspect-[16/11] xl:aspect-auto xl:min-h-72 xl:flex-1" : "aspect-[16/9]",
      )}
    >
      <Image
        src={still.src}
        alt=""
        fill
        sizes={feature ? "(min-width: 1280px) 640px, (min-width: 768px) 92vw, 86vw" : "(min-width: 1280px) 420px, (min-width: 768px) 46vw, 86vw"}
        placeholder="blur"
        className={cn(
          "object-cover transition-transform duration-700 ease-out-expo group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
          still.position,
        )}
      />
    </div>
  );
}

interface ResourceCardProps {
  resource: ResourceSummary;
  readMinutes?: number;
  feature?: boolean;
  headingLevel?: "h2" | "h3";
  className?: string;
}

export function ResourceCard({ resource, readMinutes, feature = false, headingLevel = "h3", className }: ResourceCardProps) {
  const Heading = headingLevel;
  return (
    <article
      className={cn(
        "group relative flex h-full flex-col overflow-hidden rounded-lg border border-line bg-surface transition-[transform,border-color] duration-500 ease-out-expo hover:-translate-y-1 hover:border-line-strong",
        className,
      )}
    >
      <ResourceCover resource={resource} feature={feature} />
      <div className={cn("flex flex-1 flex-col p-6", feature && "sm:p-8 xl:flex-none")}>
        <p className="font-mono text-data uppercase tracking-[0.1em] text-muted">
          {resource.format} · {resource.category}
        </p>
        <Heading className={cn("mt-3 tracking-[-0.02em]", feature ? "text-display-md" : "text-title")}>
          <Link href={routes.resource(resource.slug)} className="after:absolute after:inset-0 after:content-['']">
            {resource.title}
          </Link>
        </Heading>
        <p className={cn("mt-3 text-ink-soft", !feature && "text-[0.9375rem]")}>{resource.dek}</p>
        <p className="mt-auto flex items-center justify-between pt-6 text-sm text-muted">
          <span>{readMinutes ? `${readMinutes} min read` : resource.format}</span>
          <ArrowRight size={16} className="btn-arrow text-ink" />
        </p>
      </div>
    </article>
  );
}