interface PointsCardProps {
  balance: number;
  todayConsumed: number;
  onViewDetail: () => void;
  onViewUsage: () => void;
}

export default function PointsCard({
  balance,
  todayConsumed,
  onViewDetail,
  onViewUsage,
}: PointsCardProps) {
  return (
    <div className="profile-points-section">
      <div className="profile-points-grid">
        <div className="profile-points-card">
          <div className="profile-points-card-header">
            <span className="profile-points-label">剩余积分</span>
            <span className="profile-points-corner-link" onClick={onViewDetail}>
              充值记录 →
            </span>
          </div>
          <div className="profile-points-value-row">
            <span className="profile-points-value primary">{balance}</span>
            <span className="profile-points-unit">分</span>
          </div>
        </div>
        <div className="profile-points-card">
          <div className="profile-points-card-header">
            <span className="profile-points-label">今日消耗</span>
            <span className="profile-points-corner-link" onClick={onViewUsage}>
              消耗明细 →
            </span>
          </div>
          <div className="profile-points-value-row">
            <span className="profile-points-value danger">{todayConsumed}</span>
            <span className="profile-points-unit">分</span>
          </div>
        </div>
      </div>
    </div>
  );
}
