import { Button } from 'components/common';
import { Input } from 'components/inputs';
import { ExternalLink } from 'components/router/ExternalLink';
import { SubmitRegister } from './types';

export type SignUpFormValues = {
  company: string;
  username: string;
  password: string;
  confirmPassword: string;
};

export const SignUpForm = ({
  submit,
  register,
}: SubmitRegister<SignUpFormValues>) => {
  return (
    <div>
      <form className="spacingY2" onSubmit={submit}>
        <Input placeholder="Company name" {...register('company')} required />
        <Input placeholder="Email address" {...register('username')} required />
        <Input
          placeholder="Password"
          type="password"
          {...register('password')}
          required
        />
        <Input
          placeholder="Confirm password"
          type="password"
          {...register('confirmPassword')}
          required
        />
        <Button size="l" block type="submit" onClick={submit}>
          Sign Up
        </Button>
      </form>
      <div className="marginY4 fz14">
        By creating an account, I accept Fansifter's
        <br />
        <ExternalLink href="https://fansifter.com/terms-of-service.pdf">
          Terms of Service
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/data-processing-addendum.pdf">
          Data Processing Addendum
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/gdpr.pdf">
          Privacy Policy (GDPR)
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/ccpa.pdf">
          Privacy Policy (CCPA)
        </ExternalLink>
        , and{' '}
        <ExternalLink href="https://fansifter.com/cookies-policy.pdf">
          Cookies Policy
        </ExternalLink>
      </div>
    </div>
  );
};