import React, { useState } from "react";

import OurProject1 from "../assets/our-project/OurProject1.png";

import OurProject2 from "../assets/our-project/OurProject2.png";
import ArrowCircleLeft from "../assets/our-project/ArrowCircleLeft.png";
import ArrowCircleRight from "../assets/our-project/ArrowCircleRight.png";
import Constants from "./constants/constants";
import { motion, AnimatePresence } from "framer-motion";

const OurProject = () => {

const [currentImage, setCurrentImage] = useState(OurProject1);

const handleNext = () => {

setCurrentImage(OurProject2);
};

const handlePrev = () => {

setCurrentImage(OurProject1);
};

return (
<div className="OurProject">
<div className="max-w-full h-[955px] px-[72px] py-[120px]">
<div className="max-w-full h-full flex flex-col items-center">
<motion.div
className="w-[532px] h-[114px] text-center"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.35 }}
>
<p className="flex text-[48px] font-bold justify-center">
{Constants.OURPROJECT_TEXT}
</p>
<p className="text-[24px] font-medium text-[#4f4f4f] mt-[16px]">
{Constants.OURPROJECT_SUBTEXT}
</p>
</motion.div>
<div className="w-full flex mt-[80px]">
<div className="flex flex-1">
<div className="w-[599px] h-[356px] mt-[18.5px]">
<motion.p
className="text-[20px] text-[#00829b] font-bold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
{Constants.JUDICIARYMUNICIPAL_TEXT}
</motion.p>
<motion.p
className="mt-[8px] text-[16px] font-normal text-[#4f4f4f]"
variants={{
hidden: { opacity: 0, y: 50 },
 visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
{Constants.JUDICIARYMUNICIPAL_SUBTEXT}
</motion.p>
<motion.ul
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
<hr
className="w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.55 }}
>
{Constants.CARDMANAGEMENT_TEXT}
</motion.li>
<hr
className="w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.65 }}
>
{Constants.BOOKINNEPAL_TEXT}
</motion.li>
<hr
className="bg-[#e0e0e0] w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
 initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.75 }}
>
{Constants.FUTSALBOOKING_TEXT}
</motion.li>
</motion.ul>
</div>
</div>
<motion.div
className="flex flex-1 justify-end items-center"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
<AnimatePresence>
<motion.img
key={currentImage}
src={currentImage}
className="w-[607px] h-[393px] object-contain"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -100 }}
transition={{ duration: 0.5 }}
alt="Project Image"
/>
</AnimatePresence>
</motion.div>
</div>
<motion.div
className="w-full flex items-center justify-center mt-[80px]"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.35 }}
>
<hr
className="bg-[#e0e0e0] w-[599px] h-[1px]"
style={{ color: "#e0e0e0" }}
/>
<img
src={ArrowCircleLeft}
alt="Left Arrow"
className="mx-4 cursor-pointer"
onClick={handlePrev}
/>
<img
src={ArrowCircleRight}
alt="Right Arrow"
className="mx-4 cursor-pointer"
onClick={handleNext}
/>
 <hr
className="bg-[#e0e0e0] w-[599px] h-[1px]"
style={{ color: "#e0e0e0" }}
/>
</motion.div>
</div>
</div>
</div>
);
};

export default OurProject;