import type { Component } from 'solid-js';
import { SSButton, SSCallout, SSForm, SSHeader, SSSurface } from 'src';
import { IconSpark } from '../../demo/content';

const LoginPage: Component = () => (
  <div class="demo_page">
    <SSHeader title="Sign in" subtitle="Access the demo workspace." />
    <SSSurface class="demo_surface">
      <SSCallout color="blue" icon={<IconSpark />}>
        Use any email and password to explore the UI kit.
      </SSCallout>
      <SSForm onsubmit={() => {}}>
        <SSForm.Input label="Email" name="email" type="email" required />
        <SSForm.Input label="Password" name="password" type="password" required />
        <SSForm.Checkbox label="Remember me" name="remember" />
        <div class="demo_inline">
          <SSButton>Sign in</SSButton>
          <SSButton class="secondary">Request access</SSButton>
        </div>
      </SSForm>
    </SSSurface>
  </div>
);

export default LoginPage;