---
import Element from './Element.astro'
import type { HTMLAttributes } from 'astro/types'

interface Props extends HTMLAttributes<'svg'> {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'huge' | undefined
  color?: string | undefined
  name: string | undefined
}

const { size = 'md', color = "var(--color-action)", name, ...rest } = Astro.props

const icons = Object.values(await import.meta.glob('../assets/icons/*', { eager: true })).map(
  (file: unknown) => (file as { default: any }).default
);

const FoundIcon = icons.find((icon: { src: (string | undefined)[] }) => icon.src.includes(name));
---

<Element
  class:list={["icon", { "w-2": size === 'xs' }, { "w-3": size === 'sm' }, { "w-4": size === 'md' }, { "w-5": size === 'lg' }, { "w-6": size === 'xl' }, { "w-14": size === 'huge' }]}
  xmlns="http://www.w3.org/2000/svg"
  viewBox={`0 0 ${FoundIcon.width} ${FoundIcon.height}`}
  as="svg"
  {size}
  stroke={size === 'huge' ? 'var(--color-text-brighter)' : color}
  overflow="visible"
  {...rest}
>
  <FoundIcon />
</Element>