import Button from "@/src/components/lib/layout/Button";
import H1 from "@/src/components/lib/layout/H1";
import Row from "@/src/components/lib/layout/Row";
import Section from "@/src/components/lib/layout/Section";
import Span from "@/src/components/lib/layout/Span";
import Stack from "@/src/components/lib/layout/Stack";
import Layout from "@/src/layouts/main";
import { BunextHTMLProps } from "@moduletrace/bunext/types";
import { Antenna, UtilityPole } from "lucide-react";

export default function Home() {
    return (
        <Layout>
            <Section>
                <Stack>
                    <Row className="items-center gap-20">
                        <UtilityPole
                            size={100}
                            strokeWidth={1}
                            className="mt-4"
                            opacity={0.5}
                        />
                        <Stack className="gap-4">
                            <H1 className="text-[60px] m-0 leading-[50px]">
                                404
                            </H1>
                            <Span>Page Not Found!</Span>
                            <Row className="gap-4 max-w-[400px] w-[400px]">
                                <Button
                                    title="Go Back"
                                    onClick={() => window.history.back()}
                                    className="grow"
                                >
                                    Go Back
                                </Button>
                                <Button
                                    title="Home Page"
                                    href="/"
                                    variant="outlined"
                                    linkProps={{
                                        className: "grow",
                                    }}
                                    className="w-full"
                                >
                                    Home
                                </Button>
                            </Row>
                        </Stack>
                    </Row>
                </Stack>
            </Section>
        </Layout>
    );
}

export const html_props: BunextHTMLProps = {
    lang: "en",
    className: "dark",
};
