import { useAuth } from '@/providers/auth-provider';
import { TopBar } from '@/components/layout/top-bar';
import { Avatar } from '@/components/base/avatar/avatar';

export const ProfilePage = () => {
    const { user } = useAuth();

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <TopBar title="Profile" />
            <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
                <Avatar size="2xl" initials={user.initials} />
                <div className="text-center">
                    <h2 className="text-xl font-semibold text-primary">{user.name}</h2>
                    <p className="text-sm text-tertiary">{user.email}</p>
                    <p className="mt-1 text-xs text-quaternary capitalize">{user.role}</p>
                </div>
                <div className="mt-4 rounded-lg bg-secondary px-4 py-3 text-sm text-tertiary">
                    Profile management is coming soon.
                </div>
            </div>
        </div>
    );
};