import type {Route} from "../../.react-router/types/app/pages/+types/HomePage";
import {Box, Button, Flex, Group, Image, Text, Select, MantineProvider, em} from '@mantine/core';
import {Link, useNavigate} from "react-router";
import {marginRound, marginTopBottom, maxWidth} from "~/styles";
import {Notifications} from "@mantine/notifications";
import GlobalAffix from "~/components/GlobalAffix.tsx";

export function meta({}: Route.MetaArgs) {
    return [
        { title: "HomePage" },
        { name: "description", content: "Welcome!" },
    ];
}

export default function Component() {
    const navigate = useNavigate()

    return (
        <Flex gap="md" align="center" direction="column" p={em(20)} h="100vh">
            <Group justify="flex-end" style={maxWidth}>
                <Select
                    size="md"
                    placeholder="Search for services"
                    data={['Book Appointment', 'Find a Doctor', 'Contact Us', 'Emergency Services', 'Pharmacy Services', 'Health Checkup', 'Vaccination Services']}
                    value={null}
                    searchable
                    nothingFoundMessage="Nothing found..."
                    onChange={(_) => {
                        navigate("/dashboard")
                    }}
                />
            </Group>

            <Image
                radius="md"
                h="auto"
                w={600}
                src="logo.png"
            />

            <Group>
                <Button><Link to="/">Home</Link></Button>
                <Button><Link to="/dashboard">Book Appointment</Link></Button>
                <Button><Link to="/dashboard">Find a Doctor</Link></Button>
                <Button><Link to="/">Contact Us</Link></Button>
                <Button><Link to="/dashboard">Services</Link></Button>
                <Button><Link to="/dashboard">Staff login</Link></Button>
            </Group>

            <GlobalAffix />
        </Flex>
    )
}