import Button from "@/components/lib/layout/Button";
import H1 from "@/components/lib/layout/H1";
import Row from "@/components/lib/layout/Row";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import Layout from "@/layouts/main";
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
                                    onClick={() => window.history.back()}
                                    className="grow"
                                >
                                    Go Back
                                </Button>
                                <Button
                                    href="/"
                                    variant="outlined"
                                    linkProps={{
                                        className: "grow",
                                    }}
                                    className="w-full"
                                >
                                    Home
                                </Button>
                            </Row>
                        </Stack>
                    </Row>
                </Stack>
            </Section>
        </Layout>
    );
}