"use client";

import Link from "next/link";
import { motion } from "motion/react";
import type { AtlasCategory } from "@/data/atlas/conditions";
import { CategoryPill } from "./CategoryPill";

type Props = {
  slug: string;
  name: string;
  summary: string;
  category: AtlasCategory;
  regionName?: string;
  index?: number;
};

export function ConditionCard({ slug, name, summary, category, regionName, index = 0 }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.35, delay: Math.min(index, 8) * 0.04 }}
    >
      <Link
        href={`/products/atlas/conditions/${slug}`}
        className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-[var(--color-line)] bg-white p-6 transition-all duration-300 hover:-translate-y-1 hover:border-[var(--color-blue)] hover:shadow-lg motion-reduce:transform-none"
      >
        <div
          aria-hidden
          className="pointer-events-none absolute -right-10 -top-10 h-36 w-36 rounded-full bg-[var(--color-blue)]/5 blur-2xl transition-all duration-500 group-hover:bg-[var(--color-blue)]/10"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute right-4 top-4 text-[var(--color-blue)]/10 transition-colors group-hover:text-[var(--color-blue)]/20"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="40"
            height="40"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <circle cx="12" cy="12" r="9" />
            <path d="M3 12h18M12 3a15 15 0 010 18M12 3a15 15 0 000 18" />
          </svg>
        </div>
        <div className="relative flex items-center justify-between gap-3">
          <CategoryPill category={category} />
          {regionName ? (
            <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--color-slate)]">
              {regionName}
            </span>
          ) : null}
        </div>
        <h3 className="relative mt-4 font-display text-[19px] font-bold leading-tight tracking-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
          {name}
        </h3>
        <p className="relative mt-3 flex-1 text-[14px] leading-relaxed text-[var(--color-slate)]">
          {summary}
        </p>
        <span className="relative mt-5 text-[13px] font-semibold text-[var(--color-blue)] transition-transform group-hover:translate-x-1">
          Read overview →
        </span>
      </Link>
    </motion.div>
  );
}
