"use client"
import { motion } from "framer-motion";
import { CircleUser, Mail, SquareUser, User } from "lucide-react";
import { LiaLinkedin } from "react-icons/lia";
import { BsTwitter } from "react-icons/bs";
import { StaticImageData } from "next/image";

// interface ImageData {
//   src: string;
// }

interface TeamMember {
  name: string;
  company: string;
  role: string;
  image: StaticImageData;
}

interface TeamCardProps {
  member: TeamMember;
}

export function TeamCard({ member }: TeamCardProps) {
  return (
    <motion.div
      className="relative group cursor-pointer"
      whileHover={{ y: -8 }}
      transition={{ duration: 0.3 }}
    >
      <div className="bg-white rounded-2xl overflow-hidden shadow-lg relative">
        <div className="relative h-full overflow-hidden">
          <div className="w-full lg:h-[350px] h-[300px]">
            <img
            src={member.image.src}
            alt={member.name}
            className="w-full h-full object-fill"
          />
          
          </div>

          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          {/* Need this section  */}
          
          {/* <motion.div
            className="absolute -bottom-3 left-0 right-0 p-6 translate-y-full group-hover:bottom-22 group-hover:translate-y-0 transition-transform duration-300"
            initial={{ y: "100%" }}
          >
            <div className="flex gap-3 justify-center">
              <motion.button
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
                className="w-10 h-10 rounded-full cursor-pointer bg-white flex items-center justify-center hover:bg-orange-500 hover:text-white transition-colors relative overflow-hidden"
              >
                <SquareUser className="w-5 h-5 relative z-10" />
                <motion.span
                  className="absolute inset-0 bg-orange-500 rounded-full"
                  initial={{ scale: 0 }}
                  whileHover={{ scale: 1 }}
                  transition={{ duration: 0.3, ease: "easeOut" }}
                />
              </motion.button>
             
              <motion.button
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
                className="w-10 h-10 rounded-full cursor-pointer bg-white flex items-center justify-center hover:bg-orange-500 hover:text-white transition-colors relative overflow-hidden"
              >
                <Mail className="w-5 h-5 relative z-10" />
                <motion.span
                  className="absolute inset-0 bg-orange-500 rounded-full"
                  initial={{ scale: 0 }}
                  whileHover={{ scale: 1 }}
                  transition={{ duration: 0.3, ease: "easeOut" }}
                />
              </motion.button>
            </div>
          </motion.div> */}

        </div>

        <div className="p-5 text-center relative">
          <h3 className="text-gray-900 mb-1 text-xl font-semibold">{member.name}</h3>
          <p className="text-orange-500 text-lg font-semibold">{member.role}</p>
          <p className="text-gray-500 text-lg ">{member.company}</p>

          <motion.div
            className="absolute -top-3 right-5 w-7 h-7 bg-orange-500 rounded-full"
            animate={{
              scale: [1, 1.2, 1],
              opacity: [0.7, 1, 0.7],
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />

          <motion.div
            className="absolute -top-6 right-12 w-4 h-4 bg-orange-300 rounded-full"
            animate={{
              y: [-10, -20, -10],
              opacity: [0, 0.6, 0],
              scale: [0, 1, 0],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              delay: 0.5,
              ease: "easeOut",
            }}
          />
          <motion.div
            className="absolute -top-4 right-20 w-3 h-3 bg-orange-400 rounded-full"
            animate={{
              y: [-5, -15, -5],
              opacity: [0, 0.5, 0],
              scale: [0, 1, 0],
            }}
            transition={{
              duration: 1.8,
              repeat: Infinity,
              delay: 1,
              ease: "easeOut",
            }}
          />
          <motion.div
            className="absolute -top-8 right-8 w-5 h-5 bg-orange-200 rounded-full"
            animate={{
              y: [-15, -25, -15],
              opacity: [0, 0.4, 0],
              scale: [0, 0.8, 0],
            }}
            transition={{
              duration: 2.2,
              repeat: Infinity,
              delay: 0.3,
              ease: "easeOut",
            }}
          />
        </div>
      </div>
    </motion.div>
  );
}