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 { Contact, ScrollText } from "lucide-react";

export default function Main() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw]">
                <Span>Howdy Tech Enthusiasts! I'm Benjamin Toby</Span>
                <H1 className="leading-snug">
                    Software Engineer, DevOps Engineer, Full Stack Developer,
                    Software Architect, Philosopher, Solar Energy Enthusiast.
                </H1>
                <Row className="items-stretch flex-col md:flex-row w-full md:w-auto">
                    <Button
                        beforeIcon={
                            <Contact size={17} className="font-normal" />
                        }
                        href="/contact"
                        className="grow w-full"
                    >
                        Contact Me
                    </Button>
                    <Button
                        beforeIcon={
                            <ScrollText size={17} className="font-normal" />
                        }
                        href="/contact"
                        variant="outlined"
                        className="grow w-full"
                    >
                        Resume
                    </Button>
                </Row>
            </Stack>
        </Section>
    );
}