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 MicrosoftSignInButton = ({
  buttonProps,
  type = 'signIn',
}: Props) => {
  const { signIn } = useAuthActions();
  return (
    <Button
      size='lg'
      onClick={() => signIn('microsoft-entra-id')}
      className='text-lg font-semibold'
      {...buttonProps}
    >
      <div className='flex flex-row my-auto space-x-2'>
        <div className='flex flex-row my-auto'>
          <svg className='scale-150' viewBox='0 0 23 23'>
            <path fill='#f35325' d='M1 1h10v10H1z' />
            <path fill='#81bc06' d='M12 1h10v10H12z' />
            <path fill='#05a6f0' d='M1 12h10v10H1z' />
            <path fill='#ffba08' d='M12 12h10v10H12z' />
          </svg>
        </div>
        <p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with Microsoft</p>
      </div>
    </Button>
  );
};