import React from 'react';
import styled from 'styled-components';
import { startOAuth } from '../../auth/sso';

const Divider = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
  margin: 1.25rem 0 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  gap: 0.75rem;

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
  }
`;

const SsoButton = styled.button`
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  color: #fff;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  margin-top: 0.6rem;

  &:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
  }

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }
`;

export type OAuthProviderFlags = {
  google?: boolean;
  microsoft?: boolean;
};

type SsoButtonsProps = {
  intent: 'login' | 'signup';
  providers: OAuthProviderFlags;
  disabled?: boolean;
};

const SsoButtons = ({ intent, providers, disabled = false }: SsoButtonsProps): JSX.Element | null => {
  const google = Boolean(providers.google);
  const microsoft = Boolean(providers.microsoft);
  if (!google && !microsoft) {
    return null;
  }

  return (
    <>
      <Divider>or continue with</Divider>
      {google && (
        <SsoButton
          type="button"
          disabled={disabled}
          onClick={() => startOAuth('google', intent)}
        >
          Continue with Google
        </SsoButton>
      )}
      {microsoft && (
        <SsoButton
          type="button"
          disabled={disabled}
          onClick={() => startOAuth('microsoft', intent)}
        >
          Continue with Microsoft
        </SsoButton>
      )}
    </>
  );
};

export default SsoButtons;
