"use client";

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { FaArrowRight } from 'react-icons/fa';

// Define the Item interface
interface Item {
    id: number;
    media: string; // URL for image or video
    title: string;
    description: string;
    link: string;
}

// Define the items array with type annotations
const items: Item[] = [
    {
        id: 1,
        media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860621/Homepage%20%E2%80%94%20Sept%202024/sc01_HP_240917_Connect_v01_edm2pd.mp4",
        title: "Product Management",
        description:
            "Coordinate and manage product sprints in collaboration with cross-functional team members, ensuring efficient planning and execution. Work closely with partners from different teams to iterate rapidly, align goals, and drive continuous improvement throughout the development process.",
        link: "/product-manager",
    },
    {
        id: 2,
        media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860622/Homepage%20%E2%80%94%20Sept%202024/sc02_HP_240917_Automate_v01_tnxxyr.mp4",
        title: "Marketing",
        description:
            "Develop and implement marketing strategies to promote products and services, analyze market trends, and identify target audiences. Collaborate with sales teams to create effective campaigns that drive brand awareness and customer engagement while measuring the effectiveness of marketing initiatives.",
            link: "/marketing",
    },
    {
        id: 3,
        media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
        title: "Sales",
        description:
            "Drive revenue growth by identifying potential clients, building relationships, and closing sales deals. Develop sales strategies that align with company goals, deliver presentations to prospective customers, and provide exceptional customer service to ensure client satisfaction and retention.",
            link: "/sales",
    },
    {
        id: 4,
        media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
        title: "HR",
        description:
            "Manage recruitment processes, employee relations, and organizational development initiatives. Ensure compliance with labor laws and regulations while fostering a positive workplace culture that promotes employee engagement and professional growth. Implement training programs to enhance workforce capabilities and performance.",
            link: "/hr",
    },
];

export default function Cliclables() {
    const [selectedItem, setSelectedItem] = useState<Item>(items[0]);

    const handleButtonClick = (item: Item) => {
        setSelectedItem(item);
    };

    return (
        <div className="w-full max-w-6xl mx-auto py-5 px-8">

            <div className="relative w-full">
                {/* Image section */}
                <motion.div
                    key={`img-${selectedItem.id}`}
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.5 }}
                    className="h-full bg-gray-100 rounded-xl overflow-hidden"
                >
                    <video
                        src={selectedItem.media}
                        // alt={selectedItem.title}
                        autoPlay
                        className="w-full h-full object-cover"
                    />
                </motion.div>
            </div>

            {/* Navigation buttons at the top */}
            <div className="flex flex-col md:flex-row space-y-3 md:space-y-0 items-center justify-between my-8">
                {items.map((item) => (
                    <button
                        key={item.id}
                        onClick={() => handleButtonClick(item)}
                        className={`py-2 px-auto w-56 rounded-full transition-all duration-300 uppercase ${selectedItem.id === item.id
                            ? "bg-white text-black shadow-lg scale-105"
                            : "bg-transparent text-white border border-gray-500"
                            }`}
                    >
                        {item.title}
                    </button>
                ))}
            </div>

            <div className="relative w-full">
                {/* Description section */}
                <motion.div
                    key={`desc-${selectedItem.id}`}
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.5 }}
                    className="flex flex-col justify-center"
                >
                    <h3 className="text-2xl font-semibold text-white">{selectedItem.title}</h3>
                    <p className="text-gray-600 leading-relaxed">
                        {selectedItem.description}
                    </p>
                    <a className="text-gray-300 hover:text-gray-100 flex items-center mt-4" href={selectedItem.link}>Learn More <FaArrowRight className='ml-4'/></a>
                </motion.div>
            </div>

        </div>
    );
}