import type { VariantProps } from 'class-variance-authority';
import type { ComponentProps } from 'react';
import Image from 'next/image';
import { useAuthActions } from '@convex-dev/auth/react';

import type { buttonVariants } from '@gib/ui';
import { Button } from '@gib/ui';

interface Props {
  buttonProps?: Omit<ComponentProps<'button'>, 'onClick'> &
    VariantProps<typeof buttonVariants> & {
      asChild?: boolean;
    };
  type?: 'signIn' | 'signUp';
}

export const GibsAuthSignInButton = ({
  buttonProps,
  type = 'signIn',
}: Props) => {
  const { signIn } = useAuthActions();
  return (
    <Button
      size='lg'
      onClick={() => signIn('authentik')}
      className='text-lg font-semibold'
      {...buttonProps}
    >
      <div className='my-auto flex flex-row space-x-1'>
        <Image
          src={'/misc/auth/gibs-auth-logo.png'}
          className=''
          alt="Gib's Auth"
          width={30}
          height={30}
        />
        <p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with Gib&apos;s Auth</p>
      </div>
    </Button>
  );
};
