---
import RatingStars from './RatingStars.astro'

interface Props {
  slug: string
  brand: string
  rating: number
  bonus_amount: string | null
  payout_speed: string | null
  license: string | null
  pay_n_play: number
  payment_methods: string
  pageSrc?: string
  pageType?: string
  pros?: string[]
  compact?: boolean
  rank?: number
  hot?: boolean
}

const {
  slug, brand, rating, bonus_amount, payout_speed, license,
  pay_n_play, payment_methods, pageSrc = 'unknown', pageType = 'unknown',
  pros = [], compact = false, rank, hot = false,
} = Astro.props

const ctaHref = `/go/${slug}/?pos=card_cta&src=${pageSrc}&type=${pageType}`
const reviewHref = `/kasino/${slug}/`

let methods: string[] = []
try { methods = JSON.parse(payment_methods) } catch {}

const rankClass = rank === 1 ? 'rank-1' : rank === 2 ? 'rank-2' : rank === 3 ? 'rank-3' : 'rank-other'
---

<div class="card p-4 md:p-5 flex items-center gap-4 relative overflow-hidden">
  <!-- Subtle accent line top for rank 1 -->
  {rank === 1 && (
    <div class="absolute top-0 left-0 right-0 h-0.5" style="background:linear-gradient(90deg,transparent,#00D4AA,transparent)"></div>
  )}

  <!-- Rank -->
  {rank != null && (
    <div class={`rank-badge ${rankClass} flex-shrink-0`}>{rank}</div>
  )}

  <!-- Logo placeholder -->
  <div class="flex-shrink-0 flex items-center justify-center w-16 h-12 md:w-20 md:h-14 rounded-lg" style="background:#162850;border:1px solid #1E3058;">
    <span class="font-heading font-bold text-[#5BA3F5] text-xs text-center leading-tight px-1">{brand}</span>
  </div>

  <!-- Info -->
  <div class="flex-1 min-w-0">
    <div class="flex flex-wrap items-center gap-2 mb-1">
      <a href={reviewHref} class="font-heading font-bold text-base text-[#F0F4FF] hover:text-[#00D4AA] no-underline">{brand}</a>
      {hot && <span class="badge badge-hot text-xs">🔥 Populär</span>}
      {license && <span class={license === 'SGA' ? 'badge badge-sga' : license === 'MGA' ? 'badge badge-mga' : 'badge badge-curacao'}>{license}</span>}
      {pay_n_play === 1 && <span class="badge badge-pnp">⚡ Pay N Play</span>}
    </div>

    <RatingStars rating={rating} size="sm" />

    {!compact && (
      <div class="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-xs text-[#8BA3C7]">
        {bonus_amount && bonus_amount !== 'Ingen välkomstbonus' && (
          <span class="text-[#F5C518] font-semibold">🎁 {bonus_amount}</span>
        )}
        {payout_speed && <span>⚡ Uttag: <strong class="text-[#F0F4FF]">{payout_speed}</strong></span>}
      </div>
    )}

    {pros.length > 0 && !compact && (
      <ul class="mt-1.5 space-y-0.5 hidden md:block">
        {pros.slice(0, 3).map(p => (
          <li class="text-xs text-[#8BA3C7] flex items-start gap-1.5">
            <span class="text-[#00D4AA] flex-shrink-0">✓</span>
            <span>{p}</span>
          </li>
        ))}
      </ul>
    )}
  </div>

  <!-- CTA -->
  <div class="flex flex-col gap-2 flex-shrink-0 items-end">
    <a
      href={ctaHref}
      rel="nofollow noopener sponsored"
      target="_blank"
      class="btn-primary text-sm px-5 py-2.5"
    >
      Spela nu →
    </a>
    <a href={reviewHref} class="text-xs text-[#8BA3C7] hover:text-[#00D4AA] no-underline text-center">
      Läs recension
    </a>
  </div>
</div>