---
import { Icon } from 'astro-icon/components';
import { twMerge } from 'tailwind-merge';
import type { Item } from '~/types';

export interface Props {
  items?: Array<Item>;
  defaultIcon?: string;
  classes?: Record<string, string>;
}

const { items = [], classes = {}, defaultIcon } = Astro.props as Props;

const {
  container: containerClass = '',
  panel: panelClass = '',
  title: titleClass = '',
  description: descriptionClass = '',
  icon: defaultIconClass = 'text-primary dark:text-blue-300 border-primary dark:border-blue-500 dark:shadow-blue-500/40 dark:shadow-sm',
} = classes;
---

{
  items && items.length && (
    <div class={twMerge('grid grid-cols-1 md:grid-cols-2 gap-4', containerClass)}>
      {items.map(({ title, description, icon, classes: itemClasses = {} }) => (
        <div
          class={twMerge(
            'flex intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-300 ease-in-out backdrop-blur-sm bg-white/15 dark:bg-transparent hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md hover:translate-y-[-2px]',
            panelClass,
            itemClasses?.panel
          )}
        >
          <div class="flex-shrink-0 mr-3 rtl:mr-0 rtl:ml-3">
            {(icon || defaultIcon) && (
              <Icon
                name={icon || defaultIcon}
                class={twMerge('w-8 h-8 p-1.5 rounded-full border-2', defaultIconClass, itemClasses?.icon)}
              />
            )}
          </div>
          <div>
            {title && <p class={twMerge('text-lg font-bold', titleClass, itemClasses?.title)} set:html={title} />}
            {description && (
              <div class="text-muted mt-2 overflow-hidden">
                <div
                  class={twMerge(
                    'text-sm max-h-[6rem] hover:max-h-[300px] transition-all duration-500 ease-description',
                    descriptionClass,
                    itemClasses?.description
                  )}
                  set:html={description}
                />
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  )
}

<style>
  /* Custom easing function for description expansion */
  .ease-description {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Fade effect for the gradient overlay */
  .hover\:opacity-0:hover {
    opacity: 0;
  }
</style>