"use client";

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

const personData = [
  {
    id: 1,
    name: "Sarah Johnson",
    thumbnail: "https://randomuser.me/api/portraits/women/1.jpg",
    description:
      "Full-stack developer with 5 years of experience in React and Node.js. Passionate about building scalable web applications.",
  },
  {
    id: 2,
    name: "Michael Chen",
    thumbnail: "https://randomuser.me/api/portraits/men/2.jpg",
    description:
      "UX/UI designer specializing in user-centered design. Creates beautiful and intuitive interfaces for web and mobile apps.",
  },
  {
    id: 3,
    name: "Emily Rodriguez",
    thumbnail: "https://randomuser.me/api/portraits/women/3.jpg",
    description:
      "DevOps engineer focused on cloud infrastructure and CI/CD pipelines. AWS certified and experienced with Docker and Kubernetes.",
  },
  {
    id: 4,
    name: "James Wilson",
    thumbnail: "https://randomuser.me/api/portraits/men/4.jpg",
    description:
      "Backend developer specialized in Python and Django. Builds robust APIs and microservices architectures. Knows a little bit of everything.",
  },
];

const page = () => {
  return (
    <div className="h-[100px] w-[200px] mx-auto relative flex items-center justify-center ">
      {personData.map((person, idx) => (
        <div key={idx} className="relative group">
          <div className="hidden min-w-[400px] group-hover:block absolute -top-27 left-1/2 -translate-x-1/2 text-black shadow-lg border border-gray-200 px-2 py-1 rounded-md text-sm z-20 transition-all duration-300">
            <h1 className="text-xl font-bold">{person.name}</h1>
            <p className="text-sm">{person.description}</p>
          </div>
          <motion.div
            initial={{ opacity: 0, translateY: -10 }}
            animate={{ opacity: 1, translateY: 0 }}
            transition={{ duration: 0.2, delay: idx * 0.1 }}
            className="w-[55px] h-[55px] -ml-3 rounded-full overflow-hidden border-3 border-white shadow-md hover:scale-110 transition-all duration-200 relative hover:z-10 cursor-pointer"
          >
            <img
              src={person.thumbnail}
              alt={person.name}
              className="w-full h-full object-cover"
            />
          </motion.div>
        </div>
      ))}
    </div>
  );
};

export default page;