"use client";

import Button from "@/components/ui/Button";
import Form from "@/components/ui/Form";
import NavLink from "@/components/ui/NavLink";
import RoundedContainer from "@/components/ui/RoundedContainer";

export default function Components() {
  return (
    <div className="flex flex-col items-center gap-4 w-full h-full">
      <h1>Button</h1>
      <Button
        title={"Button"}
        mode="DARK"
        onClick={() => {
          console.log("Button!");
        }}
      />

      <h1>Form</h1>
      <Form action={"Action here"} submitText="Example submit button ">
        <input type="text" name="text" placeholder="example placeholder text" />
        {/* Add custom input! */}
      </Form>

      <h1>NavLink</h1>
      <NavLink name="Example Navlink" link="/Playground/Components/" />

      <h2>External</h2>
      <NavLink
        name="Example External Navlink"
        external={true}
        link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
      />

      <h1>Rounded Container</h1>
      <RoundedContainer>
        <div className=" min-h-5 min-w-5">
          <p>Contents</p>
          <p>More Contents</p>
        </div>
      </RoundedContainer>

      <h2>Non-slim</h2>
      <RoundedContainer slim={false}>
        <div className=" min-h-5 min-w-5">
          <p>Contents</p>
          <p>More Contents</p>
        </div>
      </RoundedContainer>
    </div>
  );
}