import React from 'react';
import './CardList.css';

export default function CardList({ items = [], cols = 3, onAction }) {
  return (
    <div className="aa-cardlist" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
      {items.map((it, i) => (
        <div className="aa-cardlist-item" key={i}>
          <div className="aa-card-cover">{it.emoji || '📄'}</div>
          <div className="aa-card-body">
            <div className="aa-card-title">{it.title}</div>
            <div className="aa-card-desc">{it.desc}</div>
            {it.tags && it.tags.length ? (
              <div className="aa-card-tags">
                {it.tags.map((t, ti) => (
                  <span className="aa-card-tag" key={ti}>{t}</span>
                ))}
              </div>
            ) : null}
          </div>
          {it.actions && it.actions.length ? (
            <div className="aa-card-actions">
              {it.actions.map((a, ai) => (
                <button key={ai} onClick={() => onAction && onAction({ item: it, action: a })}>
                  {a}
                </button>
              ))}
            </div>
          ) : null}
        </div>
      ))}
    </div>
  );
}