---
import { Icon } from 'astro-icon';
import { Picture } from '@astrojs/image/components';

interface Item {
  title: string;
  description?: string;
  icon?: string;
}

export interface Props {
  title?: string;
  items: Array<Item>;
  image?: string | any; // TODO: find HTMLElementProps
}

const {
  title = await Astro.slots.render('title'),
  items = [],
  image = await Astro.slots.render('image'),
} = Astro.props;
---

<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
  <div class="grid gap-6 row-gap-10 md:grid-cols-2">
    <div class="md:py-4 md:pr-16 mb-4 md:mb-0">
      {title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
      {
        items &&
          items.length &&
          items.map(({ title, description, icon }, index) => (
            <div class="flex">
              <div class="flex flex-col items-center mr-4">
                <div>
                  {index !== items.length - 1 ? (
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
                      {icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
                    </div>
                  ) : (
                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
                      <Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
                    </div>
                  )}
                </div>
                <div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
              </div>
              <div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
                {title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
                {description && <p class="text-muted dark:text-slate-400" set:html={description} />}
              </div>
            </div>
          ))
      }
    </div>
    <div class="relative">
      {
        image &&
          (typeof image === 'string' ? (
            <Fragment set:html={image} />
          ) : (
            <Picture
              class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
              widths={[400, 768]}
              sizes="(max-width: 768px) 100vw, 432px"
              aspectRatio="432:768"
              {...image}
            />
          ))
      }
    </div>
  </div>
</section>
