import {
  clampTileSpan,
  DASHBOARD_TILE_GRID_COLS
} from '../utils/dashboardLayout'

/**
 * Kachel im Raster `.dashboard-tile-grid` / `.dashboard-stat-grid`.
 * Standard: volle Zeile (Mobile 2/2, Desktop 4/4). Anpassbar via spanMobile / spanDesktop.
 */
export default function DashboardTile({
  children,
  spanMobile = DASHBOARD_TILE_GRID_COLS.mobile,
  spanDesktop = DASHBOARD_TILE_GRID_COLS.desktop,
  className = ''
}) {
  const sm = clampTileSpan(spanMobile, DASHBOARD_TILE_GRID_COLS.mobile)
  const lg = clampTileSpan(spanDesktop, DASHBOARD_TILE_GRID_COLS.desktop)
  return (
    <div
      className={`dashboard-tile ${className}`.trim()}
      style={{
        '--tile-sm': String(sm),
        '--tile-lg': String(lg)
      }}
    >
      {children}
    </div>
  )
}