import React from 'react';
import { Link } from 'react-router-dom';
{{$relativePrefix := relativePrefix .Page.Path}}{{range .AST.Definitions}}{{if .Entity}}import { {{.Entity.Name}} } from '{{$relativePrefix}}types/{{.Entity.Name}}';
{{end}}{{end}}
{{range .Page.Elements}}{{if .Section}}import {{.Section.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Section.Name | title}}Section';
{{end}}{{if .Component}}import {{.Component.Type | title}}Component from '{{$relativePrefix}}components/{{.Component.Type | title}}Component';
{{end}}{{end}}

export default function {{.Page.Name}}Page() {
  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link to="/" className="text-xl font-bold text-gray-900">
                My Blog
              </Link>
            </div>
            <nav className="flex space-x-8">
              {{range .AST.Definitions}}{{if .Page}}{{if ne .Page.Layout "admin"}}<Link
                to="{{.Page.Path}}"
                className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
              >
                {{.Page.Name}}
              </Link>
              {{end}}{{end}}{{end}}
            </nav>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <h1 className="text-3xl font-bold text-gray-900 mb-6">
            {{if .Page.Title}}{{.Page.Title | derefString}}{{else}}{{.Page.Name}}{{end}}
          </h1>

          {{range .Page.Elements}}
          {{if .Section}}
          <{{.Section.Name | title}}Section />
          {{end}}
          {{if .Component}}
          <{{.Component.Type | title}}Component />
          {{end}}
          {{end}}
        </div>
      </main>
    </div>
  );
}