---
/**
 * MOREMINIMORE - ICON COMPONENT
 * Lucide-style line icons. Use:
 *   <Icon name="phone" size={24} />
 *   <Icon name="message" color="yellow" size={32} />
 *
 * Icon catalog: ../icon-paths.ts
 * Add new icons by appending to ICON_PATHS in that file.
 */

import { ICON_PATHS, type IconName } from './icon-paths';

interface Props {
  name: IconName;
  size?: number;
  class?: string;
  /** Brand tint: 'default' = currentColor, 'yellow' = brand yellow, 'dark' = black */
  color?: 'default' | 'yellow' | 'dark';
  strokeWidth?: number;
}

const {
  name,
  size = 24,
  class: className = '',
  color = 'default',
  strokeWidth = 2,
} = Astro.props;

const colorMap = {
  default: 'currentColor',
  yellow: 'var(--color-primary)',
  dark: 'var(--color-black)',
};

const paths = ICON_PATHS[name];
---

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  stroke={colorMap[color]}
  stroke-width={strokeWidth}
  stroke-linecap="round"
  stroke-linejoin="round"
  class={`icon icon-${name} ${className}`}
  aria-hidden="true"
>
  <Fragment set:html={paths} />
</svg>

<style>
  .icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
  }
</style>
