import type { Metadata } from "next";

import { PageHeader } from "@/components/design-system/page-header";
import { CheckboxSection, RadioSection, SwitchSliderOtp } from "@/components/design-system/sections/forms/choices";
import { CalendarSection, CommandSection } from "@/components/design-system/sections/forms/dates";
import { FileUploadSection } from "@/components/design-system/sections/forms/upload-demo";
import { InputGroups, InputStates, SelectsAndCombobox, TextareaAndField } from "@/components/design-system/sections/forms/fields";
import { ActionBarSection } from "@/components/design-system/sections/forms/action-bar-demo";
import { ProductForm } from "@/components/design-system/sections/forms/product-form";
import { SecretInputSection } from "@/components/design-system/sections/forms/secret-demo";
import { UnsavedChangesSection } from "@/components/design-system/sections/forms/unsaved-demo";

export const metadata: Metadata = { title: "Forms | Medora Design System" };

export default function FormsPage() {
  return (
    <>
      <PageHeader
        title="Forms"
        description="Inputs and choices, from a single field to a complete validated form built with react-hook-form and zod."
      />
      <InputStates />
      <InputGroups />
      <TextareaAndField />
      <SelectsAndCombobox />
      <CheckboxSection />
      <RadioSection />
      <SwitchSliderOtp />
      <CalendarSection />
      <CommandSection />
      <FileUploadSection />
      <ProductForm />
      <ActionBarSection />
      <UnsavedChangesSection />
      <SecretInputSection />
    </>
  );
}