// components/UserDetailModal.tsx

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

interface UserDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  user: any;
}

const UserDetailModal: React.FC<UserDetailModalProps> = ({ isOpen, onClose, user }) => {
  if (!isOpen) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg"
      onClick={onClose}
    >
      <div className="relative w-auto max-w-3xl mx-auto my-6 modal">
        <div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
          <div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
          <div className="flex items-center">
              <img
                src={user["img_url"]} // Assuming img_url is a valid image URL
                alt={`${user.username}'s profile`}
                className="w-12 h-12 rounded-full mr-4"
              />
              <h3 className="text-3xl font-semibold">{user.username}</h3>
            </div>
            <button
              className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
              onClick={onClose}
            >
              <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
            </button>
          </div>
          <div className="relative p-6 flex-auto">
            <div>
              <p>Email: {user.email}</p>
              <p>Points: {user.points}</p>
              {/* Add more details as needed */}
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default UserDetailModal;