'use client';

import { useSession } from 'next-auth/react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

function ProfileField({
  label,
  value
}: {
  label: string;
  value: string;
}) {
  return (
    <div className='rounded-lg border p-4'>
      <div className='text-muted-foreground text-sm'>{label}</div>
      <div className='mt-1 font-medium'>{value}</div>
    </div>
  );
}

export default function ProfileViewPage() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div className='p-4 text-sm text-muted-foreground'>Loading profile...</div>;
  }

  return (
    <div className='flex w-full flex-col p-4'>
      <Card className='max-w-2xl'>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          <CardDescription>Summary of the current signed-in user.</CardDescription>
        </CardHeader>
        <CardContent className='space-y-4 text-sm'>
          <ProfileField label='Name' value={session?.user?.name ?? '-'} />
          <ProfileField label='Email' value={session?.user?.email ?? '-'} />
          <ProfileField
            label='Organization'
            value={session?.user?.activeOrganizationName ?? '-'}
          />
        </CardContent>
      </Card>
    </div>
  );
}
