import React from 'react';
import './ProfileSection.css';

function ProfileSection({ profile }) {
  return (
    <section className="profile-section">
      <div className="profile-card">
        <div className="profile-avatar-container">
          <img 
            src={profile.avatar} 
            alt={profile.nickname}
            className="profile-avatar"
          />
          <div className="avatar-ring"></div>
        </div>
        
        <h1 className="profile-nickname">{profile.nickname}</h1>
        
        <p className="profile-introduction">{profile.introduction}</p>
      </div>
    </section>
  );
}

export default ProfileSection;
