import React, { useState, useContext } from "react";
import { motion } from "framer-motion";
import Container from "../sections/projects/Container";
import HoverableSkillList from "../sections/projects/HoverableSkill";
import Heading from "../Heading";
import { pdf } from "../../assets/index";
import { LoadingContext } from "../utils/LoadingContext";
import NavigationDots from "../utils/NavigationDots";
const Skills = ({ isVisible, skillsData }) => {
const [hoveredItem, setHoveredItem] = useState({
section: null,
index: null,
}); // Track section and index
const { isLoading } = useContext(LoadingContext);
// Fallback if skillsData or its nested properties are undefined
if (isLoading) return <div>Loading...</div>;
if (!skillsData || !skillsData.skills) return <div>No skills data found</div>;
// Group tools by type
const groupedTools = skillsData.skills.tools?.reduce((acc, tool) => {
if (!acc[tool.type]) acc[tool.type] = [];
acc[tool.type].push(tool);
return acc;
}, {});
return (
<motion.div
className="relative z-2 pt-2 sm:pt-10"
id="skills"
initial={{ opacity: 0, y: 100 }}
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 100 }}
transition={{ duration: 0.2, ease: "easeOut" }}
>
<Heading
title="My Skills"
highlightWords={[{ word: "Skills", color: "text-orange-500" }]}
/>
<NavigationDots currentSectionId="skills" />
<div className="text-white flex flex-col">
<div className="flex flex-wrap gap-6 justify-center mb-10">
{/* Tech Section */}
{skillsData.skills.techs && (
<Container
noBackground
className="relative max-w-[400px]"
shadow={false}
>
<HoverableSkillList
title="Tech"
items={skillsData.skills.techs}
color="orange"
hoveredItem={hoveredItem}
setHoveredItem={setHoveredItem}
section="tech" // Unique section identifier
getKey={(item, index) => `tech-${index}`}
isVisible={isVisible}
/>
</Container>
)}
{/* Tools Section */}
{groupedTools &&
Object.entries(groupedTools).map(([toolType, tools]) => (
<Container
key={toolType}
noBackground
className="relative max-w-[400px]"
shadow={false}
>
<HoverableSkillList
title={`${toolType} Tools`}
items={tools}
color="orange"
hoveredItem={hoveredItem}
setHoveredItem={setHoveredItem}
section={`tools-${toolType}`} // Unique section identifier
getKey={(item, index) => `${toolType}-${index}`}
isVisible={isVisible}
/>
</Container>
))}
{/* Programming Languages Section */}
{skillsData.skills.languages && (
<Container
noBackground
className="min-w-[280px] max-w-auto lg:max-w-[400px]"
shadow={false}
>
<HoverableSkillList
title="Languages"
items={skillsData.skills.languages}
color="orange"
hoveredItem={hoveredItem}
setHoveredItem={setHoveredItem}
section="languages" // Unique section identifier
getKey={(item, index) => `language-${item.id || index}`}
isVisible={isVisible}
/>
</Container>
)}
{/* Databases Section */}
{skillsData.skills.databases && (
<Container
noBackground
className="min-w-[280px] max-w-auto lg:max-w-[400px]"
shadow={false}
>
<HoverableSkillList
title="Databases"
items={skillsData.skills.databases}
color="orange"
hoveredItem={hoveredItem}
setHoveredItem={setHoveredItem}
section="databases"
getKey={(item, index) => `database-${item.id || index}`}
isVisible={isVisible}
/>
</Container>
)}
</div>
{/* Experience Section */}
<Heading
title="My Experience"
className="relative text-4xl lg:text-5xl font-bold mb-16 pt-72"
highlightWords={[{ word: "Experience", color: "text-orange-500" }]}
/>
<div className="flex flex-wrap gap-6 mb-10">
{/* Academic Experience */}
{skillsData.experience?.academic?.length > 0 && (
<>
<div className="flex lg:justify-start sm:justify-center items-center mb-2 mx-6 lg:mx-52">
{/* Education Section Header */}
<img
src={
skillsData.logos?.find((logo) => logo.academic)?.academic
}
alt="Education logo"
className="w-10 h-10 lg:w-14 lg:h-14 object-contain mr-4"
/>
<h3 className="text-2xl sm:text-3xl font-semibold">
Education
</h3>
</div>
{skillsData.experience.academic.map((exp, index) => (
<Container
key={`academic-${index}`}
className="relative bg-black/60 flex flex-col mb-8 mx-6 lg:mx-52 w-full p-6 rounded-lg shadow-lg"
>
{/* Top Row: Logo + Info */}
<div className="flex items-center gap-4">
{/* Logo */}
{exp.logo && (
<img
src={exp.logo}
alt="Academic logo"
className="w-16 sm:w-20 md:w-24 lg:w-32 rounded-full"
/>
)}
{/* Info (Title, Organization, Dates) */}
<div className="flex flex-col">
{/* Title */}
<h4 className="text-base sm:text-2xl text-orange-400 font-bold">
{exp.name}
</h4>
{/* Organization */}
<p className="text-sm sm:text-lg text-gray-400">
{exp.org}
</p>
{/* Dates */}
<p className="text-xs sm:text-sm text-gray-300 mt-1">
{exp.start_date
? new Date(exp.start_date).toLocaleDateString()
: "Unknown"}{" "}
-{" "}
{exp.end_date
? new Date(exp.end_date).toLocaleDateString()
: "Present"}
</p>
</div>
</div>
{/* Description (Below Top Row) */}
<p
className="text-sm sm:text-base mt-4"
dangerouslySetInnerHTML={{ __html: exp.description }}
></p>
{/* Skills (Below Description) */}
{exp.skills && (
<div className="flex flex-wrap gap-2 mt-4">
{/* Techs */}
{exp.skills.techs?.map((tech, index) => (
<span
key={`tech-${index}`}
className="bg-[#4a4a4a] text-[#d4d4d4] text-sm px-3 py-1 rounded-md hover:bg-[#6a6a6a]"
>
{tech}
</span>
))}
{/* Tools */}
{exp.skills.tools?.map((tool, index) => (
<span
key={`tool-${index}`}
className="bg-[#4a4a4a] text-[#d4d4d4] text-sm px-3 py-1 rounded-md hover:bg-[#6a6a6a]"
>
{tool}
</span>
))}
{/* Languages */}
{exp.skills.languages?.map((language, index) => (
<span
key={`language-${index}`}
className="bg-[#4a4a4a] text-[#d4d4d4] text-sm px-3 py-1 rounded-md hover:bg-[#6a6a6a]"
>
{language}
</span>
))}
</div>
)}
</Container>
))}
</>
)}
{/* Professional Experience */}
{skillsData.experience?.professional?.length > 0 && (
<>
<div className="flex items-center mb-10">
{" "}
{/* Flex container for logo and title */}
<img
src={
skillsData.logos?.find((logo) => logo.professional)
?.professional
}
alt="logo"
color="white"
className="w-12 h-12 sm:w-16 sm:h-16 object-contain mr-4"
/>
<h3 className="text-3xl font-semibold">Professional</h3>
</div>
{skillsData.experience.professional.map((exp, index) => (
<Container
key={`professional-${index}`}
className="relative p-6 bg-gray-900 justify-center rounded-lg shadow-lg flex flex-col sm:flex-row sm:gap-6"
>
{/* Thumbnail (Left) */}
{exp.logo && (
<img
src={exp.logo}
alt="Professional logo"
className="w-24 h-24 sm:w-32 sm:h-32 object-contain rounded-lg"
/>
)}
{/* Content (Right) */}
<div className="flex flex-col justify-center flex-1 text-left sm:pl-6">
{/* Title */}
<h4 className="text-xl sm:text-2xl text-orange-400 font-bold">
{exp.title}
</h4>
{/* Organization */}
<p className="text-sm sm:text-lg text-gray-400">
{exp.org}
</p>
{/* Dates */}
<p className="text-xs sm:text-sm text-gray-300 mt-1">
{exp.start_date
? new Date(exp.start_date).toLocaleDateString()
: "Unknown"}{" "}
-{" "}
{exp.end_date
? new Date(exp.end_date).toLocaleDateString()
: "Present"}
</p>
{/* Description */}
<p className="text-sm sm:text-base mt-2">
{exp.description}
</p>
</div>
</Container>
))}
</>
)}
</div>
<h2 className="text-2xl sm:text-3xl font-semibold text-center mb-5">
Resume Download
</h2>
<div className="relative self-center justify-center bg-black/60 items-center p-4 rounded-lg mb-5 transition-shadow duration-150 hover:shadow-[0_0_30px_rgba(255,255,255,0.6)]">
<a
href="https://drive.google.com/file/d/1CCl9T4pHoPJ3KNcGz0XUIfGGf7o5X_vj/view?usp=drive_link"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center space-x-2"
>
<img src={pdf} alt="PDF Logo" className="w-10 sm:w-12" />
<span className="text-white font-bold text-xl sm:text-2xl px-4 py-1">
Resume
</span>
</a>
</div>
</div>
</motion.div>
);
};
export default Skills;
