// "use client"

import React from "react"
import { Button, Nav, Stack } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'
import Link from "next/link"

const NavLink = (props: any) =>
  <li className="nav-item">
    <a className="nav-link" href={props.href}>
      {props.children}
    </a>
  </li>

const Text = (props: any) =>
  <p>{props.children}</p>

export default function Page() {
  return (
    <Stack direction="horizontal" gap={1} style={{ padding: '1rem' }}>
      <Stack gap={1} style={{ padding: '1rem' }}>
        <Text>Point of Sale</Text>
        <Nav className="flex-column">
          <NavLink href="/stocks">
            Stocks
          </NavLink>
          <NavLink href="/quantities">
            Quantities
          </NavLink>
          <NavLink href="/inventory">
            Inventory
          </NavLink>
          <NavLink href="/logs">
            Logs
          </NavLink>
          <NavLink href="/receipts">
            Receipts
          </NavLink>
        </Nav>
      </Stack>

      <Stack gap={1} style={{ padding: '1rem', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
        <Text>Stuff</Text>
        <Button style={{ maxWidth: 'fit-content' }}>Submit THIS</Button>
      </Stack>
    </Stack>
  )
}