export function ManagementTable({ columns, rows, getRowId, isMobile = false }) {
  return (
    <div style={{ display: 'grid', gap: '0.75rem' }}>
      {!isMobile ? (
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
            gap: '1rem',
            padding: '0 1rem',
            color: 'var(--color-text-soft)',
            fontWeight: 700,
            fontSize: '0.88rem',
          }}
        >
          {columns.map((column) => (
            <span key={column.key}>{column.label}</span>
          ))}
        </div>
      ) : null}

      {rows.map((row) => (
        <article
          key={getRowId(row)}
          style={{
            borderRadius: '20px',
            border: '1px solid var(--color-border)',
            padding: '1rem',
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : `repeat(${columns.length}, minmax(0, 1fr))`,
            gap: isMobile ? '0.65rem' : '1rem',
            alignItems: 'center',
            background: '#fff',
            minWidth: 0,
          }}
        >
          {columns.map((column) => (
            <div key={column.key} style={{ minWidth: 0 }}>
              {isMobile ? (
                <span
                  style={{
                    display: 'block',
                    color: 'var(--color-text-soft)',
                    fontSize: '0.82rem',
                    fontWeight: 700,
                    marginBottom: '0.2rem',
                  }}
                >
                  {column.label}
                </span>
              ) : null}
              {column.render ? column.render(row) : <span>{row[column.key]}</span>}
            </div>
          ))}
        </article>
      ))}
    </div>
  );
}