IconCircle icon

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

interface Props {
  items?: IconItem[];
  size?: string;
  title?: string;
}

const {
  items = [
    { icon: '📊', label: 'Analytics', href: '#' },
    { icon: '🎯', label: 'Ads', href: '#' },
    { icon: '✏️', label: 'Design', href: '#' },
    { icon: '🔍', label: 'SEO', href: '#' },
    { icon: '📱', label: 'Social', href: '#' },
  ],
  size = '72px',
  title = '',
} = Astro.props;
---

<div class="ico">
  {title && <h3 class="ico__title">{title}</h3>}
  <div class="ico__row">
    {items.map((item) => (
      item.href ? (
        <a class="ico__item" href={item.href} style={`--ico-size: ${size}`} aria-label={item.label}>
          <span class="ico__icon" aria-hidden="true">{item.icon}</span>
          <span class="ico__label">{item.label}</span>
        </a>
      ) : (
        <div class="ico__item" style={`--ico-size: ${size}`}>
          <span class="ico__icon" aria-hidden="true">{item.icon}</span>
          <span class="ico__label">{item.label}</span>
        </div>
      )
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ico__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.5rem;
  }
  .ico__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .ico__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: default;
  }
  a.ico__item { cursor: pointer; }
  .ico__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ico-size, 72px);
    height: var(--ico-size, 72px);
    border-radius: 50%;
    background: #f0f0ff;
    border: 2px solid rgba(99,102,241,0.2);
    font-size: calc(var(--ico-size, 72px) * 0.45);
    transition: background 0.2s, transform 0.2s;
  }
  a.ico__item:hover .ico__icon {
    background: rgba(99,102,241,0.12);
    transform: translateY(-3px);
  }
  .ico__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
  }
</style>