import type { MetaFunction } from "@remix-run/node";
import { StrictMode } from "react";
import {
  Page,
  Layout,
  Card,
  Text,
  Button,
  BlockStack,
  InlineStack,
} from "@shopify/polaris";
import indexStyles from "../index.css?url";

export const meta: MetaFunction = () => {
  return [
    { title: "403 - アクセス拒否" },
    { name: "description", content: "このページにアクセスする権限がありません" },
  ];
};

export const links = () => [
  { rel: "stylesheet", href: indexStyles },
];

export default function ForbiddenPage() {
  return (
    <StrictMode>
      <Page title="403 - アクセス拒否">
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500" align="center">
                <Text as="h1" variant="heading4xl" alignment="center">
                  403
                </Text>
                <Text as="h2" variant="headingLg" alignment="center">
                  アクセス拒否
                </Text>
                <Text as="p" variant="bodyMd" alignment="center">
                  このページにアクセスする権限がありません。<br />
                  Shopifyの管理画面からアクセスしてください。
                </Text>
                <InlineStack align="center">
                  <Button
                    variant="primary"
                    onClick={() => window.history.back()}
                  >
                    戻る
                  </Button>
                </InlineStack>
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout>
      </Page>
    </StrictMode>
  );
}