---
import { Icon } from 'astro-icon/components';
import CTA from '~/components/ui/CTA.astro';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { Pricing } from '~/types';

const {
  title = '',
  subtitle = '',
  tagline = '',
  prices = [],

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props as Pricing;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />
  <div class="flex items-stretch justify-center">
    <div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
      {
        prices &&
          prices.map(({ title, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
            <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
              {price && period && (
                <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
                  {hasRibbon && ribbonTitle && (
                    <div class="absolute right-[-5px] rtl:right-auto rtl:left-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
                      <span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
                        {ribbonTitle}
                      </span>
                    </div>
                  )}
                  <div class="px-2 py-0">
                    {title && (
                      <h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
                    )}
                    {subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
                    <div class="my-8">
                      <div class="flex items-center justify-center text-center mb-1">
                        <span class="text-5xl">$</span>
                        <span class="text-6xl font-extrabold">{price}</span>
                      </div>
                      <span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
                    </div>
                    {items && (
                      <ul role="list" class="my-8 md:my-10 space-y-2 text-left">
                        {items.map(
                          ({ description, icon }) =>
                            description && (
                              <li class="mb-1.5 flex items-start space-x-3 leading-7">
                                <div class="rounded-full bg-primary mt-1">
                                  <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
                                </div>
                                <span>{description}</span>
                              </li>
                            )
                        )}
                      </ul>
                    )}
                  </div>
                  {callToAction && (
                    <div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
                      {typeof callToAction === 'string' ? (
                        <Fragment set:html={callToAction} />
                      ) : (
                        callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
                      )}
                    </div>
                  )}
                </div>
              )}
            </div>
          ))
      }
    </div>
  </div>
</WidgetWrapper>