import React from "react";
import { mailtoHref } from "../config";

export function IconLabel({ icon, text, hint }) {
  return (
    <span className="label-text">
      <span className="icon">{icon}</span>
      <span>{text}</span>
      {hint && <span className="hint">{hint}</span>}
    </span>
  );
}

export function InfoLabel({ icon, text }) {
  return (
    <span className="info-label">
      <span className="icon">{icon}</span>
      <span>{text}</span>
    </span>
  );
}

export function TableCell({ icon, children, onClick }) {
  return (
    <span className="table-cell" onClick={onClick}>
      <span className="icon">{icon}</span>
      <span>{children}</span>
    </span>
  );
}

export function StatItem({ icon, label, value }) {
  return (
    <span className="stat-item">
      <span className="stat-item-lead">
        {icon ? <span className="icon stat-item-icon">{icon}</span> : null}
        <span className="stat-item-label">{label}</span>
      </span>
      <strong className="stat-item-value">{value}</strong>
    </span>
  );
}

/** 邮箱展示为可点击的 mailto 链接（非法地址则回退为纯文本） */
export function MailtoEmail({ address, className, children }) {
  const href = mailtoHref(address);
  const text = children ?? address;
  if (!href) {
    return <span className={className}>{text}</span>;
  }
  return (
    <a href={href} className={className || "mailto-email-link"}>
      {text}
    </a>
  );
}

export function InfoRow({ icon, label, value, actionLabel, onAction, children }) {
  return (
    <div className="info-row">
      <span className="info-row-label">
        <span className="icon">{icon}</span>
        {label}
      </span>
      <span className="info-row-value">{children ?? value}</span>
      {actionLabel && (
        <button type="button" className="text-button" onClick={onAction}>
          {actionLabel}
        </button>
      )}
    </div>
  );
}
