import React, { Component } from "react"
import PropTypes from "prop-types"
import { Column, Text } from "ui"

export class DetailPlaceholder extends Component {
  static propTypes = {
    name: PropTypes.string,
  }

  render() {
    const { name } = this.props
    const capitalizedName = name.charAt(0).toUpperCase() + name.substr(1)

    return (
      <Column fillParent>
        <Column.Item grow />
        <Column.Item>
          <Text size="large" align="center" width="100%">
            {`Select a ${name} to view details here`}
          </Text>
          <br />
          <Text size="small" align="center" width="100%">
            {`Or 'Add New ${capitalizedName}'`}
          </Text>
        </Column.Item>
        <Column.Item grow />
      </Column>
    )
  }
}