"use client";
import React, { useRef } from "react";
import Image from "next/image";
import { motion, useInView } from "framer-motion";

const SocialSection: React.FC = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(sectionRef, {
    once: false,
    amount: 0.3,
  });

  const fadeInUp = {
    hidden: {
      opacity: 0,
      y: 60,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.8,
        ease: "easeOut" as const,
      },
    },
  };

  return (
    <section ref={sectionRef} id="feature" className="social">
      <div className="h-0 md:h-[180px] lg:h-[250px] flex justify-center relative">
        <motion.div
          className="absolute -top-[200px]"
          variants={fadeInUp}
          initial="hidden"
          animate={isInView ? "visible" : "hidden"}
        >
          <div className="relative rounded-lg overflow-hidden">
            <Image
              src="/assets/images/temp-example.png"
              alt="Example Image"
              width={1200}
              height={300}
              priority
              className="transform transition duration-700 hover:scale-105"
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default SocialSection;
