
import React from 'react';
import { ArrowLeft, User } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

const ProfileHeader = () => {
  const navigate = useNavigate();

  return (
    <header className="py-8">
      <div className="flex items-center mb-6">
        <Button 
          variant="ghost" 
          size="icon" 
          onClick={() => navigate('/settings')}
          className="mr-2"
        >
          <ArrowLeft size={20} />
        </Button>
        <h1 className="text-2xl font-bold neuro-text">프로필 관리</h1>
      </div>
      
      {/* User Profile Picture */}
      <div className="flex flex-col items-center mb-8">
        <div className="relative mb-4">
          <Avatar className="h-24 w-24 neuro-flat">
            <AvatarImage src="" alt="Profile" />
            <AvatarFallback className="text-2xl bg-neuro-income text-white">
              <User size={40} />
            </AvatarFallback>
          </Avatar>
        </div>
      </div>
    </header>
  );
};

export default ProfileHeader;
