import React from "react";
import styled from "styled-components";

const Row = styled.div.attrs(({ theme, zoom }) => ({
  style: {
    height: theme.snake.cell.size * (zoom || 1) + "rem"
  }
}))`
  white-space: nowrap;
`;

const Cell = styled.div.attrs(({ theme, zoom }) => ({
  style: {
    height: theme.snake.cell.size * (zoom || 1) + "rem",
    width: theme.snake.cell.size * (zoom || 1) + "rem",
    border: theme.snake.cell.border
  }
}))`
  display: inline-block;
  vertical-align: top;
  text-align: center;
  box-shadow: ${({ theme }) => theme.stage.cell.boxShadow};
`;

export const Stage = ({ data, children, zoom = 1 }) => (
  <div>
    {data.map((r, y) => (
      <Row key={`y${y}`} zoom={zoom}>
        {r.map((c, x) => (
          <Cell key={`x${x}y${y}`} zoom={zoom}>
            {children(c, zoom)}
          </Cell>
        ))}
      </Row>
    ))}
  </div>
);

export default Stage;