export default function AccountProfileView({profile}) {
    return <>
            <div className="pb-5">
                <div className="flex flex-col gap-1">
                    <div className="w-full">
                        <h4 className="font-semibold text-lg">Account Profile</h4>
                    </div>
                    <div className="w-full overflow-x-auto">
                        <>
                            <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
                                <thead className="py-2 text-sm text-slate-500 text-left">
                                <tr>
    
                                    <th scope="col" className="px-2 py-2">
                                        Member ID
                                    </th>
                                    <th scope="col" className="px-2">
                                        Practice/specialization
                                    </th>
                                    <th scope="col" className="px-2">
                                        URL Name
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {(profile && Object.keys(profile).length > 0) ? 
                                    <tr className="py-2 border-t border-dashed border-slate-300">
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{profile?.member_id}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">Practice: {profile?.practice}</div>
                                                <div className="text-base font-semibold">Specialization: {profile?.specialization}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{profile?.url_name}</div>
                                            </div>
                                        </td>
                                    </tr>
                                    :
                                    <tr className="py-2 border-t border-dashed border-slate-300">
                                        <td className="px-3 py-2" colSpan={3}>
                                            <div className="flex justify-center items-center">
                                                No Record Found
                                            </div>
                                        </td>
                                    </tr>
                                }
                                </tbody>
                            </table>
                        </>
                    </div>
                </div>
            </div>
        </>
}