import {useLoaderData} from '@remix-run/react';

import styles from './index.module.css';

export function loader({request}) {
  return {
    host: new URL(request.url).host,
  };
}

export const meta = () => {
  return [
    {
      title: 'Silphius',
    },
    {
      name: 'description',
      content: 'Silphius is an action RPG and homestead simulator',
    },
  ];
};

export default function Index() {
  const {host} = useLoaderData();
  return (
    <div>
      <h1 className={styles.title}>Silphius</h1>
      <ul className={styles.actions}>
        <li><a href="/play/local">Single-player</a></li>
        <li><a href={`/play/remote/${host}`}>Multi-player</a></li>
      </ul>
    </div>
  );
}