import { useTranslation } from "react-i18next";
import { motion, useReducedMotion } from "framer-motion";
import CardContainer from "./CardContainer";

const ResultsPage = () => {
  const { t } = useTranslation();
  const prefersReducedMotion = useReducedMotion();

  return (
    <div className="header-text">
      <motion.h1
        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
        whileInView={
          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
        }
        viewport={{ once: true, margin: "-100px" }}
        transition={{ type: "spring", damping: 22, stiffness: 140 }}
      >
        <span className="gold-text">&ldquo;</span>
        {t("results.heading.part1")} <br /> {t("results.heading.part2")}
        <span className="gold-text">&rdquo;</span>
      </motion.h1>
      <CardContainer />
    </div>
  );
};

export default ResultsPage;