'use client';

import { FC } from "react";
import { ClientUser } from "@/types/mutual/context/validations";
import { ClientOnline } from "@/types/mutual/context/validations";

interface UserProfileSectionProps {
    userData: ClientUser | null;
    onlineData: ClientOnline | null;
}

const UserProfileSection: FC<UserProfileSectionProps> = ({ userData, onlineData }) => {
    if (!userData) return null;
    return (
        <div className="mb-2">
            <div className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all hover:shadow-md">
                <div className="bg-amber-300 p-2 hover:bg-amber-400 transition-all">
                    <div className="flex items-center">
                        <div className="mr-2">
                            {userData && userData.avatar ? (<img className="rounded-full border border-white" src={userData.avatar} alt="Avatar" width={40} height={40} />) : (
                                <div className="w-10 h-10 rounded-full bg-amber-400 flex items-center justify-center border border-white">
                                    <div className="text-white text-sm font-bold">{userData?.email ? userData.email.slice(0, 2).toUpperCase() : 'U'}</div>
                                </div>
                            )}
                        </div>
                        <div className="overflow-hidden">
                            <h2 className="text-sm font-bold text-black truncate">{userData?.person ? `${userData.person.firstname} ${userData.person.surname}` : 'User'}</h2>
                            <p className="text-xs text-amber-800 truncate">{userData?.email || 'No email'}</p>
                            <p className="text-xs font-medium capitalize">{onlineData?.userType || 'guest'}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default UserProfileSection;
