import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import { getOAuthUrl, oauthProviders } from '../lib/oauth-providers'

export function OAuthButtons() {
  return (
    <Stack direction="row" spacing={1} sx={{ justifyContent: 'center' }}>
      {oauthProviders.map((p) => (
        <Button
          key={p.id}
          variant="outlined"
          href={getOAuthUrl(p.id)}
          sx={{
            borderColor: p.color,
            color: p.color,
            '&:hover': {
              borderColor: p.color,
              bgcolor: `${p.color}14`,
              borderWidth: '1px',
            },
          }}
        >
          Войти через {p.label}
        </Button>
      ))}
    </Stack>
  )
}
