import { ssoProviders } from '../../data/authData'

interface SSOButtonsProps {
  onSelect: (providerId: string) => void
  selectedProvider?: string | null
  compact?: boolean
}

export default function SSOButtons({ onSelect, selectedProvider, compact = false }: SSOButtonsProps) {
  return (
    <div className={`grid gap-2 ${compact ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}`}>
      {ssoProviders.map((provider) => (
        <button
          key={provider.id}
          type="button"
          onClick={() => onSelect(provider.id)}
          className={`flex items-center justify-center gap-2 rounded-xl border bg-white text-sm font-medium transition-all hover:shadow-md ${
            selectedProvider === provider.id
              ? 'border-silos-brown bg-silos-brown/5 text-silos-brown ring-2 ring-silos-brown/20'
              : 'border-silos-cream-dark text-silos-text hover:border-silos-tan'
          } ${compact ? 'px-3 py-2' : 'px-4 py-2.5'}`}
        >
          <img
            src={provider.logo}
            alt=""
            className="h-5 w-5 shrink-0 object-contain"
            aria-hidden
          />
          {provider.name}
        </button>
      ))}
    </div>
  )
}