import { title as titleFilter } from '../filters.ts';

export default ({
  title,
  theme,
  extraStylesheets,
  extraScripts,
  cacheBust,
}) => <head>
  <meta charSet="utf-8" />
  <title>{ titleFilter(title) }</title>

  <link rel="shortcut icon" href="/assets/pub.solar.svg" />

  <meta name="theme-color" content="{{ theme.color }}" id="theme-color" />
  <meta name="description" content="You should have control of your data! We host Matrix, Nextcloud, and Mastodon for you to use." />

  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" type="text/css" href={`/styles.css${cacheBust}`} media="all" />

  <>
    {(extraStylesheets || [])
      .map(extraStylesheet => <link
        rel="stylesheet"
        type="text/css"
        href={`${extraStylesheet}${cacheBust}`}
        media="all"
        key={extraStylesheet}
      />)}
  </>
  <>
    {(extraScripts || [])
      .map(extraScript => <script
        defer
        type="application/javascript"
        src={`${extraScript}${cacheBust}`}
        key={extraScript}
      ></script>)}
  </>
</head>;
