import Button from "@/components/ui/Button";
import Form from "@/components/ui/Form";
import Hyperlink from "@/components/ui/Hyperlink";
import Referencelink from "@/components/ui/Referencelink";
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" />

      <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>Hyperlink</h1>
      <Hyperlink
        name="Example Hyperlink"
        link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
      />

      <h1>Referencelink</h1>
      <Referencelink
        name="Example Referencelink"
        link="/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>
  );
}