import React from 'react';
import { usePage } from '@inertiajs/react';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';

export default function Profile() {
    const { auth } = usePage<{ auth: { user: any } }>().props;
    const user = auth?.user;

    return (
        <MainLayout>
            <AppPageHeader title="My Profile" />
            <div className="max-w-2xl">
                <div className="bg-white rounded-lg shadow p-6">
                    <div className="space-y-4">
                        <div>
                            <label className="block text-sm font-medium text-gray-500">Name</label>
                            <p className="mt-1 text-sm text-gray-900">{user?.name}</p>
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-500">Email</label>
                            <p className="mt-1 text-sm text-gray-900">{user?.email}</p>
                        </div>
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}