import './style.css';

import type { MouseEventHandler, ReactNode } from 'react';

export function CreatorFollowButton({
  followed,
  pending = false,
  disabled = false,
  followLabel = '关注',
  followedLabel = '取消关注',
  onClick,
}: {
  followed: boolean;
  pending?: boolean;
  disabled?: boolean;
  followLabel?: string;
  followedLabel?: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      className={`creator-follow ${followed ? 'creator-follow--active' : ''}`}
      disabled={disabled || pending}
      aria-busy={pending}
      aria-label={followed && !pending ? '取消关注' : undefined}
      onClick={onClick}
    >
      {pending ? '处理中…' : followed ? followedLabel : followLabel}
    </button>
  );
}
export function CreatorUserRow({
  name,
  avatarUrl,
  subtitle,
  href,
  onClick,
  actions,
}: {
  name: string;
  avatarUrl?: string | null;
  subtitle?: string;
  href?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
  actions?: ReactNode;
}) {
  const content = (
    <>
      <span className="creator-avatar" aria-hidden="true">
        {avatarUrl ? (
          <img src={avatarUrl} alt="" />
        ) : (
          Array.from(name)[0] || '创'
        )}
      </span>
      <span className="creator-user-copy">
        <strong>{name}</strong>
        {subtitle && <small>{subtitle}</small>}
      </span>
    </>
  );
  return (
    <div className="creator-user-row">
      {href ? (
        <a
          className="creator-user-link"
          href={href}
          onClick={onClick}
          aria-label={name ? undefined : '查看创作者主页'}
        >
          {content}
        </a>
      ) : (
        <div className="creator-user-link">{content}</div>
      )}
      {actions && <div className="creator-user-actions">{actions}</div>}
    </div>
  );
}