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

interface Casino {
  slug: string
  brand: string
  rating: number
  bonus_amount: string | null
  license: string | null
  pay_n_play: number
}

interface Props {
  casinos: Casino[]
  title?: string
  pageSrc?: string
  pageType?: string
}

const { casinos, title = 'Liknande casinon', pageSrc = 'unknown', pageType = 'review' } = Astro.props
---

{casinos.length > 0 && (
  <section class="my-10">
    <h2 class="font-heading font-bold text-2xl text-[#F0F4FF] mb-4">{title}</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      {casinos.map(casino => {
        const ctaHref = `/go/${casino.slug}/?pos=related_card&src=${pageSrc}&type=${pageType}`
        return (
          <div class="card p-4 flex flex-col gap-3">
            <div class="flex items-center justify-center h-12 bg-[#0F1C35] rounded-lg border border-border">
              <span class="font-heading font-bold text-primary text-sm">{casino.brand}</span>
            </div>
            <div class="flex items-center justify-between">
              <RatingStars rating={casino.rating} size="sm" />
              {casino.license === 'SGA' && <span class="badge-sga">SGA</span>}
            </div>
            {casino.bonus_amount && (
              <p class="text-sm font-medium text-[#F0F4FF]">{casino.bonus_amount}</p>
            )}
            <a
              href={ctaHref}
              rel="nofollow noopener sponsored"
              target="_blank"
              class="btn-primary text-sm text-center"
            >
              Spela nu
            </a>
            <a href={`/kasino/${casino.slug}/`} class="text-center text-xs text-[#8BA3C7] hover:text-primary no-underline">
              Läs recension
            </a>
          </div>
        )
      })}
    </div>
  </section>
)}