'use client'

import { useUser } from '../../contexts/AuthContext'
import { SettingsSection, SettingsItem, SettingsList } from './SettingsComponents'

export function ProfileSection() {
    const user = useUser()

    return (
        <SettingsSection title="Profile">
            <SettingsList>
                <SettingsItem label="Email" meta={user?.email} />
                {user?.first_name && (
                    <SettingsItem
                        label="Name"
                        meta={`${user.first_name} ${user.last_name || ''}`.trim()}
                    />
                )}
            </SettingsList>
        </SettingsSection>
    )
}