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

const {
  title = await Astro.slots.render('title'),
  subtitle = await Astro.slots.render('subtitle'),
  tagline,
  items = [],
  actions = [],

  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}
    classes={{
      container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
      title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
    }}
  />
  <div class="mt-12">
    <div class="row-gap-8 md:grid md:grid-cols-2 md:gap-8">
      {
        items && items.length > 0 && items.map((item, index) => (
          <div class={index % 2 === 0 ? "mb-6 md:mb-0" : ""}>
            <div class="mb-6">
              {item.title && (
                <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-4">{item.title}</h3>
              )}
              <hr class="mb-4">
              {item.entries && item.entries.length > 0 && (
                <table class="w-full border-collapse">
                  <tbody>
                    {item.entries.map((entry) => (
                      <tr class="h-12">
                        <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-400" set:html={entry.description}></td>
                        <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>
        ))
      }
    </div>
  </div>

  <div class="mt-12 text-center">
    {await Astro.slots.render('disclaimer') && (
      <div class="text-xs text-muted dark:text-slate-400 mb-8" set:html={await Astro.slots.render('disclaimer')} />
    )}
    
    {
      actions && actions.length > 0 && (
        <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
          {actions.map((action) => (
            <div class="flex w-full sm:w-auto">
              <Button {...action} class="w-full sm:mb-0" />
            </div>
          ))}
        </div>
      )
    }
  </div>
</WidgetWrapper>