"use client";

import { motion, useReducedMotion } from "motion/react";

/**
 * A list of qualities or products, revealed one after another so the reader
 * takes in the breadth rather than skipping a block of nouns.
 */
export function TagList({
  items,
  accent = "thread",
}: {
  items: readonly string[];
  accent?: "thread" | "hiviz" | "indigo";
}) {
  const reduced = useReducedMotion();

  const border =
    accent === "hiviz"
      ? "hover:border-[var(--hiviz)] hover:text-[var(--hiviz)]"
      : accent === "indigo"
        ? "hover:border-[var(--indigo-lit)] hover:text-[var(--cotton)]"
        : "hover:border-[var(--thread)] hover:text-[var(--thread)]";

  return (
    <ul className="flex flex-wrap gap-2.5">
      {items.map((item, i) => (
        <motion.li
          key={item}
          initial={{ opacity: 0, y: 14, filter: "blur(4px)" }}
          whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          viewport={{ once: true, amount: 0.6 }}
          transition={{
            duration: reduced ? 0 : 0.5,
            delay: reduced ? 0 : Math.min(i * 0.045, 0.6),
            ease: [0.16, 1, 0.3, 1],
          }}
          className={`rounded-full border border-[var(--rule)] px-4 py-2 text-sm text-[var(--cotton)]/85 transition-colors duration-300 ${border}`}
        >
          {item}
        </motion.li>
      ))}
    </ul>
  );
}