"use client";

import Link from "next/link";
import Image from "next/image";
import { motion } from "motion/react";
import { RegionIcon } from "./RegionIcon";

type Props = {
  slug: string;
  name: string;
  summary: string;
  conditionCount: number;
  index?: number;
  photoUrl?: string;
  photoAlt?: string;
};

export function RegionCard({
  slug,
  name,
  summary,
  conditionCount,
  index = 0,
  photoUrl,
  photoAlt,
}: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
    >
      <Link
        href={`/products/atlas/regions/${slug}`}
        className="group flex h-full flex-col overflow-hidden rounded-xl border border-[var(--color-line)] bg-white transition-all duration-300 hover:-translate-y-1 hover:border-[var(--color-blue)] hover:shadow-xl motion-reduce:transform-none"
      >
        {photoUrl ? (
          <div className="relative aspect-[16/10] w-full overflow-hidden bg-[var(--color-mist)]">
            <Image
              src={photoUrl}
              alt={photoAlt ?? name}
              fill
              sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
              className="object-cover transition-transform duration-500 group-hover:scale-[1.04] motion-reduce:transform-none"
            />
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent"
            />
            <div className="absolute left-4 top-4 flex h-11 w-11 items-center justify-center rounded-lg bg-white/95 text-[var(--color-blue)] shadow-sm backdrop-blur-sm transition-colors group-hover:bg-[var(--color-blue)] group-hover:text-white">
              <RegionIcon slug={slug} className="h-5 w-5" />
            </div>
            <div className="absolute bottom-3 left-4 font-display text-[20px] font-extrabold tracking-tight text-white drop-shadow-md">
              {name}
            </div>
          </div>
        ) : null}
        <div className="flex flex-1 flex-col p-7">
          {!photoUrl ? (
            <>
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)] transition-colors group-hover:bg-[var(--color-blue)] group-hover:text-white">
                <RegionIcon slug={slug} className="h-6 w-6" />
              </div>
              <h3 className="mt-5 font-display text-[22px] font-bold tracking-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                {name}
              </h3>
            </>
          ) : null}
          <p
            className={`${
              photoUrl ? "" : "mt-3"
            } flex-1 text-[15px] leading-relaxed text-[var(--color-slate)]`}
          >
            {summary}
          </p>
          <div className="mt-6 flex items-center justify-between border-t border-[var(--color-line)] pt-4">
            <span className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
              {conditionCount} condition{conditionCount === 1 ? "" : "s"}
            </span>
            <span className="text-[14px] font-semibold text-[var(--color-blue)] transition-transform group-hover:translate-x-1">
              Explore →
            </span>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}
