<script>
  // 1. Iconify에서 Icon 컴포넌트를 가져옵니다.
  import Icon from '@iconify/svelte';

  // 2. 버튼으로 만들 아이콘 목록을 배열로 관리하면 편리합니다.
  // 아이콘 이름은 Iconify 공식 웹사이트(https://icones.js.org/)에서 쉽게 찾을 수 있습니다.
  const actions = [
    { label: 'Add', icon: 'mdi:plus-box-outline' },
    { label: 'Copy', icon: 'mdi:content-copy' },
    { label: 'Paste', icon: 'mdi:content-paste' },
    { label: 'Delete', icon: 'mdi:delete-outline' },
    { label: 'Save', icon: 'mdi:content-save-outline' },
    { label: 'Apply Flow', icon: 'mdi:arrow-right-bold-box-outline' },
    { label: 'Undo', icon: 'mdi:undo' }
  ];

  // 각 버튼 클릭 시 실행될 함수 (예시)
  function handleAction(actionLabel) {
    alert(`'${actionLabel}' action clicked!`);
  }
</script>

<main>
  <h1>Icon Button Toolbar</h1>
  <div class="toolbar">
    {#each actions as action}
      <button 
        class="icon-button" 
        title={action.label}
        aria-label={action.label}
        on:click={() => handleAction(action.label)}
      >
        <Icon icon={action.icon} width="24" height="24" />
      </button>
    {/each}
  </div>
</main>

<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    font-family: sans-serif;
  }
  .toolbar {
    display: flex;
    gap: 0.5rem; /* 버튼 사이 간격 */
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
  .icon-button {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
  }
  .icon-button:hover {
    background-color: #e0e0e0;
    color: #000;
  }
</style>