import { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../app/store";
import { useParams } from "react-router-dom";

export default function ProfilePicture(){
    const { profileData } = useSelector((state: RootState) => state.profile);
    const [isFollowing, setIsFollowing] = useState(false);
    const { id } = useParams();
    
    const handleFollowClick = () => {
        setIsFollowing(!isFollowing);
    };
    return(
        <>
            <div className="flex mb-4">
                        <div className="relative -mt-12 md:-mt-16 ml-4 md:ml-6 flex">
                            {/* Main profile image */}
                            <div className="w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-white shadow-md overflow-hidden">
                                <img 
                                    src={profileData?.photo || '/src/images/registration/profile.png'}
                                    alt="Profile" 
                                    className="w-full h-full object-cover"
                                    referrerPolicy='no-referrer'
                                />
                            </div>
                        </div>
                        {/* Name and ID */}
                        <div className="mb-6 mt-3 px-4">
                            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-1">{profileData.first_name} {profileData.last_name?.charAt(0)}, 26</h1>
                            <p className="text-gray-600 text-sm md:text-sm">Matrimonial ID : {id ? atob(id) : ''}</p>
                        </div>
                    </div>

                    {/* Stats Row */}
                    <div className="flex flex-wrap justify-between items-center px-4">
                        <div className="flex space-x-6 md:space-x-12 mb-4 md:mb-0">
                            <div className="text-center">
                                <div className="text-xl md:text-2xl font-bold text-gray-900">{profileData.visits}</div>
                                <div className="text-xs md:text-sm text-gray-600 mt-1">Profile Visit</div>
                            </div>
                            <div className="text-center">
                                <div className="text-xl md:text-2xl font-bold text-gray-900">{profileData.posts}</div>
                                <div className="text-xs md:text-sm text-gray-600 mt-1">Posts</div>
                            </div>
                            <div className="text-center">
                                <div className="text-xl md:text-2xl font-bold text-gray-900">{profileData.followers}</div>
                                <div className="text-xs md:text-sm text-gray-600 mt-1">Followers</div>
                            </div>
                        </div>

                        {/* Follow Button */}
                        <button 
                            onClick={handleFollowClick}
                            className={`px-6 py-2 rounded-lg font-medium text-sm transition-all duration-200 ${
                                isFollowing 
                                    ? 'bg-gray-200 text-gray-700 hover:bg-gray-300' 
                                    : 'bg-blue-500 text-white hover:bg-blue-600'
                            }`}
                        >
                            {isFollowing ? 'Following' : 'Follow'}
                        </button>
                    </div>
        </>
    )
}