'use client';

import { useMe } from '@/lib/auth';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChangePasswordForm } from '@/components/profile/change-password-form';

export default function VolunteerProfile() {
  const { data: user } = useMe();
  if (!user) return null;

  return (
    <div className="space-y-4 pb-8">
      <h1 className="font-display text-2xl font-semibold text-ink">Profile</h1>

      <Card>
        <CardHeader>
          <CardTitle>{user.fullName}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-ink-400">Username</span>
            <span className="font-mono">{user.username}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-ink-400">Phone</span>
            <span className="font-mono">{user.phone}</span>
          </div>
        </CardContent>
      </Card>

      <ChangePasswordForm />
    </div>
  );
}