function BlockedUsers({ nav }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  const [users, setUsers] = React.useState(['야식탐험가', '스팸계정123']);
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <ScreenHeader title="차단한 사용자" sub="차단하면 서로의 사진이 보이지 않아요" onBack={() => nav('settings')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {users.length === 0 ? (
          <div style={{ textAlign: 'center', paddingTop: 70 }}>
            <div style={{ width: 66, height: 66, borderRadius: '50%', background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}><i className="ti ti-user-off" style={{ fontSize: 27, color: 'var(--text-muted)' }}></i></div>
            <span style={{ font: 'var(--text-body)', color: 'var(--text-secondary)' }}>차단한 사용자가 없어요</span>
          </div>
        ) : users.map(u => (
          <div key={u} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: 14 }}>
            <Avatar user={u} size={42} />
            <span style={{ font: 'var(--text-body)', flex: 1, minWidth: 0 }}>{u}</span>
            <button onClick={() => setUsers(us => us.filter(x => x !== u))} style={{ font: '600 13px/1 var(--font-family)', padding: '10px 16px', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer', flexShrink: 0 }}>차단 해제</button>
          </div>
        ))}
      </div>
    </div>
  );
}
window.BlockedUsers = BlockedUsers;