import { NextPage } from 'next';
import * as Action from '@tesseract-design/web-action-react';
import { DefaultLayout } from '@/components/DefaultLayout';

const ActionPage: NextPage = () => {
  return (
    <DefaultLayout
      title="Action"
    >
      <section>
        <div className="container mx-auto px-4">
          <h1>
            ActionButton
          </h1>
          <div>
            <section>
              <h2>Variants</h2>
              <div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                  <div>
                    <Action.ActionButton
                      variant="bare"
                      block
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="filled"
                      block
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="outline"
                      block
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="filled"
                      block
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="bare"
                      block
                      disabled
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="filled"
                      block
                      disabled
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="outline"
                      block
                      disabled
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      variant="filled"
                      block
                      disabled
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                </div>
              </div>
            </section>
            <section>
              <h2>Sizes</h2>
              <div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                  <div>
                    <Action.ActionButton
                      block
                      variant="outline"
                      size="small"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      variant="filled"
                      size="small"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      variant="outline"
                      size="medium"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      variant="filled"
                      size="medium"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      variant="outline"
                      size="large"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      variant="filled"
                      size="large"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                </div>
              </div>
            </section>
            <section>
              <h2>Compact</h2>
              <div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="outline"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="filled"
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="outline"
                      subtext={
                        <>
                          Subtext
                        </>
                      }
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="filled"
                      subtext={
                        <>
                          Subtext
                        </>
                      }
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="outline"
                      size="small"
                      subtext={
                        <>
                          Subtext
                        </>
                      }
                    >
                      Button
                    </Action.ActionButton>
                  </div>
                  <div>
                    <Action.ActionButton
                      block
                      compact
                      variant="filled"
                      size="small"
                      subtext={
                        <>
                          Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
                        </>
                      }
                    >
                      Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
                    </Action.ActionButton>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
    </DefaultLayout>
  )
}

export default ActionPage