import { NextPage } from 'next';
import { TextControlSize, TextControlStyle } from '@tesseract-design/web-base-textcontrol';
import * as Option from '@tesseract-design/web-option-react';
import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button';
import { DefaultLayout } from 'src/components/DefaultLayout';

type Props = {
  options: SelectControlBase.SelectOption[],
}

const OptionPage: NextPage<Props> = ({
  options = [
    {
      label: 'Fruits',
      children: [
        {
          label: 'Mango',
          value: 'mango',
        },
        {
          label: 'Strawberry',
          value: 'strawberry',
        },
        {
          label: 'Avocado',
          value: 'avocado',
        },
        {
          label: 'Grapes',
          value: 'grapes',
        },
      ],
    },
    {
      label: 'Non-fruits',
      children: [
        {
          label: 'Chocolate',
          value: 'chocolate',
        },
        {
          label: 'Milk',
          value: 'milk',
        },
        {
          label: 'Coffee',
          value: 'coffee',
        },
      ],
    },
  ],
}) => {
  return (
    <DefaultLayout
      title="Option"
    >
      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
        <section>
          <div className="container mx-auto px-4">
            <h1>
              DropdownSelect
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.DropdownSelect
                        size={TextControlSize.SMALL}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        size={TextControlSize.SMALL}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        size={TextControlSize.LARGE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        size={TextControlSize.LARGE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                  <form>
                    <fieldset
                      disabled
                      className="contents"
                    >
                      <legend className="sr-only">Disabled Test</legend>
                      <div className="grid grid-cols-6 gap-4 my-4">
                        <div className="col-span-2">
                          <Option.DropdownSelect
                            label="First Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Option.DropdownSelect
                            label="Middle Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Option.DropdownSelect
                            label="Last Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Option.DropdownSelect
                            label="Username"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Option.DropdownSelect
                            label="Title"
                            block
                            border
                          />
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <form>
                    <div>
                      Hi, my name is
                      {' '}
                      <Option.DropdownSelect
                        border
                        label="Name"
                        size={TextControlSize.SMALL}
                      />
                      {' '}
                      but you can call me
                      {' '}
                      <Option.DropdownSelect
                        border
                        label="Nickname"
                        size={TextControlSize.SMALL}
                      />
                      .
                    </div>
                  </form>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.DropdownSelect
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        style={TextControlStyle.ALTERNATE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        style={TextControlStyle.ALTERNATE}
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.DropdownSelect
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="Select"
                        hint="Type anything here&hellip;"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              MenuSelect
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.MenuSelect
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.MenuSelect
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>
                  Multiple
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.MenuSelect
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                        multiple
                      />
                    </div>
                    <div>
                      <Option.MenuSelect
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                        multiple
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              RadioButton
            </h1>
            <div>
              <section>
                <h2>Variants</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.RadioButton
                        block
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        variant={ButtonVariant.FILLED}
                        block
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        border
                        block
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        border
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Sizes</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.RadioButton
                        block
                        border
                        size={ButtonSize.SMALL}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        border
                        size={ButtonSize.MEDIUM}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.MEDIUM}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        border
                        size={ButtonSize.LARGE}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.LARGE}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Compact</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        name="RadioButton"
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        size={ButtonSize.SMALL}
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                    <div>
                      <Option.RadioButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                        name="RadioButton"
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.RadioButton>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              RadioTickBox
            </h1>
            <div>
              <div className="grid gap-4 my-4">
                <div>
                  <Option.RadioTickBox
                    block
                    subtext="Subtext"
                    name="RadioButton"
                  >
                    RadioButton
                  </Option.RadioTickBox>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              TagInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.TagInput
                        enhanced
                        size={TextControlSize.SMALL}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        size={TextControlSize.SMALL}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        size={TextControlSize.LARGE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        size={TextControlSize.LARGE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.TagInput
                        enhanced
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        style={TextControlStyle.ALTERNATE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        style={TextControlStyle.ALTERNATE}
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        enhanced
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="TagInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleButton
            </h1>
            <div>
              <section>
                <h2>Variants</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleButton
                        block
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        variant={ButtonVariant.FILLED}
                        block
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        block
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        disabled
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        block
                        disabled
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        block
                        indeterminate
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                        indeterminate
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Sizes</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        size={ButtonSize.SMALL}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        size={ButtonSize.MEDIUM}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.MEDIUM}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        size={ButtonSize.LARGE}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.LARGE}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Compact</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                        size={ButtonSize.SMALL}
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                    <div>
                      <Option.ToggleButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Option.ToggleButton>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleSwitch
            </h1>
            <div>
              <section>
                <h2>Default</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="Checkbox"
                      />
                    </div>
                    <div>
                      <Option.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="Checkbox"
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>With Unchecked Label</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="On"
                        uncheckedLabel="Off"
                      />
                    </div>
                    <div>
                      <Option.ToggleSwitch
                        block
                        subtext="Subtext"
                        checkedLabel="On"
                        uncheckedLabel="Off"
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ToggleTickBox
            </h1>
            <div>
              <section>
                <h2>Default</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Option.ToggleTickBox
                        block
                        subtext="Subtext"
                      >
                        Checkbox
                      </Option.ToggleTickBox>
                    </div>
                    <div>
                      <Option.ToggleTickBox
                        block
                        indeterminate
                        subtext="Subtext"
                      >
                        Checkbox
                      </Option.ToggleTickBox>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ComboBox
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.ComboBox
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.ComboBox
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                    <div>
                      <Option.ComboBox
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                        options={options}
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              TagInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.TagInput
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Option.TagInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Option.TagInput
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
      </main>
    </DefaultLayout>
  );
};

export default OptionPage;
