<script setup lang="ts">
import { Button } from '@unraid/ui';

import type { PublicOidcProvider } from '~/composables/gql/graphql';

interface Props {
  provider: PublicOidcProvider;
  disabled?: boolean;
  onClick: (providerId: string) => void;
}

const props = defineProps<Props>();

const handleClick = () => {
  props.onClick(props.provider.id);
};
</script>

<template>
  <Button
    :disabled="props.disabled"
    :variant="(props.provider.buttonVariant as any) || 'outline'"
    class="sso-provider-button h-auto min-h-[2.5rem] w-full px-4 py-2"
    :style="props.provider.buttonStyle || ''"
    @click="handleClick"
  >
    <div class="flex w-full items-center justify-center gap-2">
      <img
        v-if="props.provider.buttonIcon"
        :src="props.provider.buttonIcon"
        class="sso-button-icon h-4 w-4 flex-shrink-0"
        alt=""
        aria-hidden="true"
      />
      <span class="text-center whitespace-normal">
        {{ props.provider.buttonText || `Sign in with ${props.provider.name}` }}
      </span>
    </div>
  </Button>
</template>

<style scoped>
/* For SVG images, prefer smooth rendering */
.sso-button-icon[src*='svg'],
.sso-button-icon[src*='data:image/svg'] {
  image-rendering: auto;
  image-rendering: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* For raster images, use crisp rendering */
.sso-button-icon:not([src*='svg']):not([src*='data:image/svg']) {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Automatic hover effects for buttons with custom background colors */
.sso-provider-button[style*='background-color']:hover:not(:disabled) {
  filter: brightness(0.9) !important;
}

.sso-provider-button[style*='background-color']:active:not(:disabled) {
  filter: brightness(0.8) !important;
  transform: translateY(1px) !important;
}
</style>
