IconFlat icon

---
interface FlatItem {
  icon?: string;
  label: string;
  href?: string;
}

interface Props {
  items?: FlatItem[];
}

const {
  items = [],
} = Astro.props;
---

<section class:list={['bl-section', 'iflat-section']}>
  <div class="bl-inner">
    <div class="iflat-row">
      {items.map(item => (
        item.href
          ? (
            <a class="iflat-item" href={item.href}>
              {item.icon && <span class="iflat-icon" aria-hidden="true">{item.icon}</span>}
              <span class="iflat-label">{item.label}</span>
            </a>
          )
          : (
            <div class="iflat-item">
              {item.icon && <span class="iflat-icon" aria-hidden="true">{item.icon}</span>}
              <span class="iflat-label">{item.label}</span>
            </div>
          )
      ))}
    </div>
  </div>
</section>

<style>
  .iflat-section { background: var(--color-bg, #fff); }
  .iflat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }
  .iflat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-right: 1px solid #e5e7eb;
    flex: 1 1 auto;
    justify-content: center;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
  }
  .iflat-item:hover { background: #f5f3ff; }
  .iflat-item:last-child { border-right: none; }
  .iflat-icon { font-size: 1.2rem; }
  .iflat-label { font-size: .9rem; font-weight: 600; color: #374151; white-space: nowrap; }
</style>