import React from 'react';
import styled from 'styled-components';
import { SNOW, RED_ORANGE } from '@vincent_za/styles';
import { Table, Row, Cell } from '../../../src/web/Table';

const RowStyled = styled(Row)`
  background-color: ${SNOW};
`;

const CellStyled = styled(Cell)`
  ${props => props.isHeader && `
    padding-top: 12px;
    padding-bottom: 12px;
  `};
  ${props => props.isRequired && `
    color: ${RED_ORANGE};
  `};
`;

export default ({ propDefinitions }) => (
  <Table isMinimal>
    <RowStyled isMinimal isHeader>
      <CellStyled isHeader isMinimal width={16}>Name</CellStyled>
      <CellStyled isHeader isMinimal width={16}>Type</CellStyled>
      <CellStyled isHeader isMinimal>Default</CellStyled>
    </RowStyled>
    {
      propDefinitions.map(({ property, propType, required, defaultValue }) => (
        <Row isMinimal key={property}>
          <CellStyled isMinimal isRequired={required}>
            {property}
          </CellStyled>
          <Cell isMinimal>
            {propType}
          </Cell>
          <Cell isMinimal>
            {JSON.stringify(defaultValue, null, 2)}
          </Cell>
        </Row>
      ))
    }
  </Table>
);
