import { SignUp } from '@clerk/nextjs';

export default function SignUpPage(): React.JSX.Element {
  return (
    <div className='flex min-h-screen w-full flex-col items-center justify-center px-4'>
      <div className='w-full max-w-md space-y-6'>
        <div className='flex justify-center'>
          <SignUp
            appearance={{
              elements: {
                formButtonPrimary:
                  'bg-accent-pink-on-primary text-white hover:bg-accent-pink-on-primary/90',
                card: 'shadow-lg',
              },
            }}
          />
        </div>
      </div>
    </div>
  );
}