import { define, Styles } from 'forge'
import { runningApps } from '../server/apps'

const Apps = define('Apps', {
  margin: '0 auto',
  width: 750,
  paddingTop: 20,
})

const color = '#00c0c9'
const hoverColor = 'magenta'
const Link = define({
  base: 'a',
  color,
  textDecoration: 'none',
  borderBottom: `1px solid ${color}`,
  selectors: {
    '&:hover': {
      color: hoverColor,
      cursor: 'pointer'
    }
  }
})

const Timestamp = define({
  fontSize: 18
})

export default () => (
  <Apps>
    <Styles />
    <h1>🐾 Running Apps</h1>
    {runningApps().map(app => (
      <h2>
        <Link href={`http://localhost:${app.port}`}>{app.port}: {app.name}</Link>
        <Timestamp>Started: {new Date(app.started).toLocaleString()}</Timestamp>
      </h2>
    ))}
  </Apps>
)