import type { VariantProps } from 'class-variance-authority';
import type { ComponentProps } from 'react';
import { useAuthActions } from '@convex-dev/auth/react';
import { Github, KeyRound } from 'lucide-react';

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

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

export const AuthentikSignInButton = ({
  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 items-center gap-2'>
        <KeyRound className='size-5' />
        <p>{type === 'signIn' ? 'Continue' : 'Sign up'} with Authentik</p>
      </div>
    </Button>
  );
};

export const GitHubSignInButton = ({ buttonProps, type = 'signIn' }: Props) => {
  const { signIn } = useAuthActions();
  return (
    <Button
      size='lg'
      variant='outline'
      onClick={() => signIn('github')}
      className='text-lg font-semibold'
      {...buttonProps}
    >
      <div className='my-auto flex flex-row items-center gap-2'>
        <Github className='size-5' />
        <p>{type === 'signIn' ? 'Continue' : 'Sign up'} with GitHub</p>
      </div>
    </Button>
  );
};
