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

type 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='flex flex-row my-auto space-x-1'>
        <Image
          src={'/icons/misc/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>
  );
};
