---
import { Icon } from 'astro-icon/components';

interface Props {
  name: string;
  size?: 'sm' | 'md' | 'lg';
  class?: string;
  filled?: boolean;
  ariaLabel?: string;
}

const { name, size = 'md', class: className = '', filled = false, ariaLabel } = Astro.props;
const sizes: Record<NonNullable<Props['size']>, string> = {
  sm: 'text-[18px]',
  md: 'text-[20px]',
  lg: 'text-[24px]',
};
const iconifyName = name.replace(/_/g, '-');
const cls =
  `material-symbols-outlined ${sizes[size]} ${filled ? 'fill-1' : ''} ${className}`.trim();
---

<Icon
  name={`material-symbols:${iconifyName}`}
  class={cls}
  aria-label={ariaLabel}
  role={ariaLabel ? 'img' : 'presentation'}
/>