import { Avatar, Card, Icon, Text, Title } from '@stash/ui'
import type { ProfileSettings } from '../../settings'

/**
 * 用户资料卡：头像、认证徽标、昵称、角色、简介、IP 属地。
 * 内容来自站点设置（/admin → 资料），未设置时用默认文案。
 */
type ProfileCardProps = {
  profile: ProfileSettings
}

export function ProfileCard({ profile }: ProfileCardProps) {
  return (
    <Card padding="none" className="profile-card">
      {profile.avatar !== '' ? (
        <Avatar size="xl" src={profile.avatar} alt={profile.name} verified />
      ) : (
        <Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
      )}

      <Title level={4} weight="semibold" className="profile-name">
        {profile.name}
      </Title>

      <span className="profile-role">{profile.role}</span>

      <Text size="xs" tone="sub" className="profile-bio">
        {profile.description}
      </Text>

      <span className="profile-location">{profile.location}</span>
    </Card>
  )
}