Footer.jsx

import React from "react";
import { Heart } from "lucide-react";

const Footer = () => {
    const currentYear = new Date().getFullYear();
    const teamMembers = [
        "Abdelhak BENKORTBI",
        "Amine ZAIME",
        "Anas OUKASSOU",
        "Kevin MALDONADO"

    ];

    return (
        <footer className="bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 transition-colors">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                <div className="flex flex-col items-center space-y-4">
                    {/* Team members */}
                    <div className="flex flex-wrap justify-center gap-2">
                        {teamMembers.map((member, index) => (
                            <React.Fragment key={member}>
                                <span className="text-gray-600 dark:text-gray-300 font-medium">
                                    {member}
                                </span>
                                {index < teamMembers.length - 1 && (
                                    <span className="text-gray-400 dark:text-gray-500">•</span>
                                )}
                            </React.Fragment>
                        ))}
                    </div>

                    {/* Copyright and signature */}
                    <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                        <span>&copy; {currentYear} TaskMaster</span>
                        <span className="text-gray-400 dark:text-gray-500">|</span>
                        <div className="flex items-center gap-1">
                            <span>Made with</span>
                            <Heart size={14} className="text-red-500 dark:text-red-400 fill-current" />
                            <span>by the team</span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
};

export default Footer;