/**
 * 通用图标组件。
 *
 * 全部使用 Alright 主题的 iconfont 线性图标（见 src/iconfont.css），
 * 尺寸与颜色由使用处的 CSS 控制（font-size / color），
 * 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
 */

type IconProps = {
  /** 附加类名，便于局部覆盖字号或颜色 */
  className?: string
}

const base = (name: string, className?: string) =>
  `iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`

export function SearchIcon({ className }: IconProps) {
  return <i className={base('search', className)} aria-hidden="true" />
}

export function UserIcon({ className }: IconProps) {
  return <i className={base('user', className)} aria-hidden="true" />
}

export function RefreshIcon({ className }: IconProps) {
  return <i className={base('refresh', className)} aria-hidden="true" />
}

export function LinkIcon({ className }: IconProps) {
  return <i className={base('link', className)} aria-hidden="true" />
}

export function ExternalIcon({ className }: IconProps) {
  return <i className={base('external', className)} aria-hidden="true" />
}

export function EyeIcon({ className }: IconProps) {
  return <i className={base('eye', className)} aria-hidden="true" />
}

export function ThumbUpIcon({ className }: IconProps) {
  return <i className={base('thumb-up', className)} aria-hidden="true" />
}

export function ShareIcon({ className }: IconProps) {
  return <i className={base('share', className)} aria-hidden="true" />
}

export function CloseIcon({ className }: IconProps) {
  return <i className={base('close', className)} aria-hidden="true" />
}

export function MoreIcon({ className }: IconProps) {
  return <i className={base('more', className)} aria-hidden="true" />
}

export function ArrowUpIcon({ className }: IconProps) {
  return <i className={base('arrow-up', className)} aria-hidden="true" />
}

export function ArrowLeftIcon({ className }: IconProps) {
  return <i className={base('arrow-left', className)} aria-hidden="true" />
}

export function ArrowDownIcon({ className }: IconProps) {
  return <i className={base('arrow-down', className)} aria-hidden="true" />
}