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

interface Props {
    userProfile: ClientUser;
}

const UserProfile: FC<Props> = ({ userProfile }) => {
    if (!userProfile || !userProfile.person) return;
    const profileuser: ClientUser = JSON.parse(JSON.stringify(userProfile));
    return (
        <div className="max-w-md w-full text-md bg-white shadow-lg rounded-lg overflow-hidden transition-all hover:shadow-xl">
            <div className="bg-amber-300 p-4 hover:bg-amber-400 transition-all">
                <div className="flex items-center">
                    <div className="mr-4">
                        <img className="rounded-full border-2 border-white" src={profileuser.avatar} alt="Avatar" width={80} height={80} />
                    </div>
                    <div><h2 className="text-md font-bold text-black">Profile Info</h2></div>
                </div>
            </div>
            <div className="p-4">
                <div className="mb-2 flex items-center">
                    <span className="font-semibold w-28 text-gray-700">Email:</span>
                    <span className="text-gray-800">{profileuser.email}</span>
                </div>
                <div className="mb-2 flex items-center">
                    <span className="font-semibold w-28 text-gray-700">Full Name:</span>
                    <span className="text-gray-800">{profileuser.person.firstname} {profileuser.person.surname}</span>
                </div>
            </div>
        </div>
    )
}

export default UserProfile;
