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

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

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

<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-1 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-` +
        prices.length +
        ` xl:grid-cols-` +
        prices.length}
    >
      {
        prices &&
          prices.map(
            ({
              title,
              subtitle,
              price,
              period,
              items,
              callToAction,
              callToAction2,
              hasRibbon = false,
              content,
              id,
              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"
                id={id || ''}
              >
                {id && <a name={id} />}
                {price && period && (
                  <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-3 py-6 flex w-full flex-col justify-between text-center">
                    {hasRibbon && ribbonTitle && (
                      <div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] 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">
                          <Fragment set:html={subtitle} />
                        </p>
                      )}
                      <div class="my-6">
                        <div class="flex items-center justify-center text-center mb-1">
                          <span class="text-5xl">$</span>
                          <span class="text-5xl font-extrabold">
                            <Fragment set:html={price} />
                          </span>
                        </div>
                        <span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
                      </div>
                      {items && (
                        <ul class="my-4 space-y-2 text-left">
                          {items.map(
                            ({ description, icon }) =>
                              description && (
                                <li class="flex items-start space-x-3 text-sm">
                                  <div class="">
                                    <Icon name={icon ? icon : 'tabler:check'} class="size-4 text-secondary" />
                                  </div>
                                  <span>
                                    <Fragment set:html={description} />
                                  </span>
                                </li>
                              )
                          )}
                        </ul>
                      )}
                    </div>
                    {content && <Fragment set:html={content} />}
                    {callToAction && (
                      <div class={`flex justify-center`}>
                        {typeof callToAction === 'string' ? (
                          <Fragment set:html={callToAction} />
                        ) : (
                          callToAction &&
                          (callToAction.href || callToAction.onclick) && (
                            <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
                          )
                        )}
                      </div>
                    )}
                    {callToAction2 && (
                      <div class={`flex justify-center`}>
                        {typeof callToAction2 === 'string' ? (
                          <Fragment set:html={callToAction2} />
                        ) : (
                          callToAction2 &&
                          (callToAction2.href || callToAction2.onclick) && (
                            <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
                          )
                        )}
                      </div>
                    )}
                  </div>
                )}
              </div>
            )
          )
      }
    </div>
  </div>
</WidgetWrapper>
