IconEmoji icon

---
interface EmojiItem {
  emoji: string;
  emojiLabel?: string;
  name: string;
  body?: string;
}

interface Props {
  title?: string;
  subtitle?: string;
  items?: EmojiItem[];
  layout?: 'grid' | 'list';
}

const {
  title,
  subtitle,
  items = [],
  layout = 'grid',
} = Astro.props;
---

<section class:list={['bl-section', 'iem-section']}>
  <div class="bl-inner">
    <div class="iem">
      {(title || subtitle) && (
        <div class="iem__header">
          {title && <h2 class="iem__title">{title}</h2>}
          {subtitle && <p class="iem__subtitle">{subtitle}</p>}
        </div>
      )}
      <div class:list={['iem__items', layout === 'list' ? 'iem__items--list' : 'iem__items--grid']}>
        {items.map(item => (
          <div class="iem__item">
            <span class="iem__emoji" role="img" aria-label={item.emojiLabel ?? item.name}>{item.emoji}</span>
            <div class="iem__text">
              <p class="iem__name">{item.name}</p>
              {item.body && <p class="iem__body">{item.body}</p>}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
  .iem-section { background: var(--color-bg, #fff); }
  .iem__header { text-align: center; margin-bottom: 3rem; }
  .iem__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 .5rem;
  }
  .iem__subtitle { font-size: 1rem; color: #666; margin: 0; }
  .iem__items--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  @media (max-width: 640px) { .iem__items--grid { grid-template-columns: 1fr; } }
  @media (min-width: 641px) and (max-width: 1023px) { .iem__items--grid { grid-template-columns: 1fr 1fr; } }
  .iem__items--list { display: flex; flex-direction: column; gap: 1.25rem; }
  .iem__item { display: flex; align-items: flex-start; gap: 1rem; }
  .iem__items--grid .iem__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
  }
  .iem__emoji { font-size: 2rem; flex-shrink: 0; }
  .iem__items--list .iem__emoji { font-size: 1.5rem; margin-top: .1rem; }
  .iem__name { font-size: 1rem; font-weight: 700; color: var(--color-primary, #0a0a0a); margin: 0 0 .3rem; }
  .iem__body { font-size: 1rem; color: #666; line-height: 1.55; margin: 0; }
</style>