import Entity from '../entity/entity'
import type { GameEntity } from '../../types'

export default function Grid ({ grid }: { grid: GameEntity }) {
  const { width, height, spaces } = grid.attributes
  const w = Number(width ?? 0)
  const h = Number(height ?? 0)
  const spaceList = (spaces ?? []) as GameEntity[]
  return (
    <div
      className="grid"
      style={{
        display: 'inline-grid',
        width: '100%',
        gridTemplateColumns: `repeat(${w}, 1fr)`,
        gridTemplateRows: `repeat(${h}, 1fr)`,
      }}
    >
      {spaceList.map((space, index) => (
        <div
          key={index}
          className="grid__cell"
        >
          <Entity entity={space} />
        </div>
      ))}
    </div>
  )
}