import type { PlazaUserProfile } from '@/types/plaza';
import { FollowButton } from '@/components/user/FollowButton';
import { formatCount } from '@/lib/format';

export function UserCard({ user }: { user: PlazaUserProfile }) {
  return (
    <div className="rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-6 py-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div className="flex items-start gap-4">
          <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#2f6f57] to-teal-500 text-2xl font-bold text-white">
            {user.display_name.trim().charAt(0) || '@'}
          </div>
          <div>
            <h1 className="text-2xl font-bold text-[#17221d]">{user.display_name}</h1>
            <p className="text-sm text-[#8a928c]">@{user.slug}</p>
            {user.bio ? <p className="mt-3 max-w-xl text-[#4a5751]">{user.bio}</p> : null}
            <div className="mt-4 flex flex-wrap gap-4 text-sm text-[#4a5751]">
              <span>📝 {formatCount(user.stats.post_count)} 篇作品</span>
              <span>👥 {formatCount(user.stats.follower_count)} 粉丝</span>
              <span>❤️ {formatCount(user.stats.total_likes)} 获赞</span>
            </div>
          </div>
        </div>
        <FollowButton slug={user.slug} initialFollowing={user.viewer_following} />
      </div>
    </div>
  );
}