import { ChevronRight } from 'lucide-react'

function InstagramGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5" stroke="white" strokeWidth="2" />
      <circle cx="12" cy="12" r="4.2" stroke="white" strokeWidth="2" />
      <circle cx="17.2" cy="6.8" r="1.1" fill="white" />
    </svg>
  )
}

function XGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" className="h-3.5 w-3.5" aria-hidden="true">
      <path d="M18 6 6 18M6 6l12 12" stroke="white" strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  )
}

function MicrosoftGlyph() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
      <rect x="1" y="1" width="10" height="10" fill="#f25022" />
      <rect x="13" y="1" width="10" height="10" fill="#7fba00" />
      <rect x="1" y="13" width="10" height="10" fill="#00a4ef" />
      <rect x="13" y="13" width="10" height="10" fill="#ffb900" />
    </svg>
  )
}

function GridGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="white" className="h-3.5 w-3.5" aria-hidden="true">
      <rect x="2" y="2" width="9" height="9" rx="1.5" />
      <rect x="13" y="2" width="9" height="9" rx="1.5" />
      <rect x="2" y="13" width="9" height="9" rx="1.5" />
      <rect x="13" y="13" width="9" height="9" rx="1.5" />
    </svg>
  )
}

const providers = {
  instagram: {
    label: 'Continue with Instagram',
    heroClassName: 'bg-gradient-to-br from-fuchsia-500 via-pink-500 to-orange-400 text-white',
    panelClassName: 'border border-white/10 bg-[#2f2f2f] text-white hover:bg-[#383838]',
    heroBadge: 'bg-white/20',
    panelBadge: 'bg-gradient-to-br from-fuchsia-500 via-pink-500 to-orange-400',
    HeroGlyph: InstagramGlyph,
    PanelGlyph: InstagramGlyph,
  },
  twitter: {
    label: 'Continue with X',
    heroClassName: 'bg-[#1a1a1a] text-white hover:bg-[#242424]',
    panelClassName: 'border border-white/10 bg-[#2f2f2f] text-white hover:bg-[#383838]',
    heroBadge: 'bg-[#1d9bf0]',
    panelBadge: 'bg-[#1d9bf0]',
    HeroGlyph: XGlyph,
    PanelGlyph: XGlyph,
  },
  microsoft: {
    label: 'Continue with Microsoft',
    heroClassName: 'bg-[#1a1a1a] text-white hover:bg-[#242424]',
    panelClassName: 'border border-white/10 bg-[#2f2f2f] text-white hover:bg-[#383838]',
    heroBadge: 'bg-gradient-to-br from-lime-400 to-green-600',
    panelBadge: 'bg-white',
    HeroGlyph: GridGlyph,
    PanelGlyph: MicrosoftGlyph,
  },
}

export default function ProviderButton({ provider, onClick, disabled, variant = 'hero' }) {
  const config = providers[provider]
  if (!config) return null

  const isPanel = variant === 'panel'
  const Glyph = isPanel ? config.PanelGlyph : config.HeroGlyph
  const surface = isPanel ? config.panelClassName : config.heroClassName
  const badge = isPanel ? config.panelBadge : config.heroBadge

  return (
    <button
      type="button"
      disabled={disabled}
      onClick={() => onClick(provider)}
      className={`group flex w-full items-center gap-3 px-4 py-3.5 text-sm font-semibold transition disabled:opacity-50 ${
        isPanel ? 'rounded-lg' : 'rounded-2xl'
      } ${surface}`}
    >
      <span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md ${badge}`}>
        <Glyph />
      </span>
      <span className="flex-1 text-left">{config.label}</span>
      <ChevronRight className="h-4 w-4 shrink-0 text-white/45 transition group-hover:translate-x-0.5" />
    </button>
  )
}
