import { Link } from 'react-router-dom';

export default function ProfileCaseStats({ caseOpens = [] }) {
  if (!caseOpens.length) {
    return <p className="muted case-stats-empty">No cases opened yet.</p>;
  }

  return (
    <ul className="case-stat-list">
      {caseOpens.map((row) => (
        <li key={row.caseId}>
          <Link to={`/cases/${row.caseId}`} className="case-stat-row">
            <span className="case-stat-visual">
              {row.imageUrl ? (
                <img src={row.imageUrl} alt="" loading="lazy" />
              ) : (
                '▣'
              )}
            </span>
            <span className="case-stat-name">{row.caseName}</span>
            <span className="case-stat-count">
              <strong>{row.count}</strong>
              <span className="muted"> opened</span>
            </span>
            <span className="case-stat-keys muted">
              {row.keys} key{row.keys === 1 ? '' : 's'}
            </span>
          </Link>
        </li>
      ))}
    </ul>
  );
}
