import React from "react";
import { motion } from "framer-motion";

import { SectionWrapper } from "src/hoc";
import { fadeIn, textVariant } from "src/utils/motion";
import { styles } from "src/style";
import { testimonials } from "src/constans";

const FeedbackCard = ({ index, testimonial, title }) => (
  <motion.div
    variants={fadeIn("", "spring", index * 0.5, 0.75)}
    className="bg-[#35685952] p-10 rounded-3xl w-full"
  >
    <h3 className="text-white text-[24px] font-bold">{title}</h3>
    <div className="mt-3">
      <p className="text-white tracking-wider text-[16px] font-light ">
        {testimonial}
      </p>
    </div>
  </motion.div>
);

const Feedbacks = () => {
  return (
    <div className={`  rounded-[20px]`}>
      <div className={`bg-tertiary rounded-2xl  ]`}>
        <motion.div variants={textVariant()}>
          <h2
            className={
              "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]"
            }
          >
            Platform Description.
          </h2>
        </motion.div>
      </div>
      <div
        className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 gap-7`}
      >
        {testimonials.map((testimonial, index) => (
          <FeedbackCard key={testimonial.name} index={index} {...testimonial} />
        ))}
      </div>
    </div>
  );
};

export default SectionWrapper(Feedbacks, "platform");