MyClub/frontend/src/components/pack/NewsList.tsx

import React from 'react';
import { assetUrl } from '../../utils/url';
import { useTranslation } from 'react-i18next';

export type NewsListItem = {
  id: number | string;
  title: string;
  excerpt?: string;
  image?: string;
  slug?: string;
};

const NewsList: React.FC<{
  items: NewsListItem[];
  emptyText?: string;
  seeAllHref?: string;
  seeAllLabel?: string;
}> = ({ items, emptyText, seeAllHref, seeAllLabel }) => {
  const { t } = useTranslation();
  
  // Use provided text or fallback to translations
  const emptyTextFinal = emptyText || t('news.no_news');
  const seeAllLabelFinal = seeAllLabel || t('news.view_all_news');
  
  return (
    <>
      <div className="blog-list">
        {items && items.length > 0 ? (
          items.slice(0, 4).map((n) => (
            <a key={n.id} href={`/news/${n.slug || n.id}`} className="card" style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className="thumb" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
              <div>
                <h4>{n.title}</h4>
                {n.excerpt && (
                  <div style={{ color: 'var(--dark-gray)', fontSize: '0.9rem' }}>{n.excerpt}</div>
                )}
              </div>
            </a>
          ))
        ) : (
          <div style={{ padding: '24px', textAlign: 'center', color: 'var(--dark-gray)', background: 'var(--bg-soft)', borderRadius: '12px' }}>
            <p>{emptyTextFinal}</p>
          </div>
        )}
      </div>
      {seeAllHref && items && items.length > 0 && (
        <div style={{ marginTop: 12 }}>
          <a className="btn" href={seeAllHref}>{seeAllLabelFinal}</a>
        </div>
      )}
    </>
  );
};

export default NewsList;