import React from 'react';
import { Link } from 'react-router-dom';
import defaultApps from '~/logic/lib/default-apps';

import { Box, DisclosureBox } from "@tlon/indigo-react";
const routeList = defaultApps.map(a => `/~${a}`);

export default class Tile extends React.Component {
  render() { 
    const { bg, to, href, p, boxShadow, ...props } = this.props;

    let childElement = (
      <Box p={typeof p === 'undefined' ? 2 : p} width="100%" height="100%">
        {props.children}
      </Box>
    );

    if (to) {
      if (routeList.indexOf(to) !== -1 || to === '/~landscape/home' || to === '/~profile') {
        childElement= (<Link to={to}>{childElement}</Link>);
      } else {
        childElement= (<a href={to}>{childElement}</a>);
      }

    }
      

    return (
      <Box
        borderRadius={2}
        overflow="hidden"
        bg={bg || "white"}
        boxShadow={boxShadow || '0 0 0px 1px rgba(0, 0, 0, 0.3) inset'}
        {...props}
      >
        <Box
          height="100%"
          width="100%"
        >
          {childElement}
        </Box>
      </Box>
    );
  }
}

@@ -286,17 +286,16 @@
 nder() %7B
- 
 %0A    con
@@ -603,16 +603,53 @@
 profile'
+ %7C%7C to.startsWith('/~landscape/ship')
 ) %7B%0A    
@@ -792,22 +792,16 @@
 %0A%0A    %7D%0A
-      
 %0A%0A    re

fix group tile links to not href