import h from '../shared/h.js'
import { SVG } from './svg.js'

export function Icon ({ _size, _rtlFlip, children, ...props }) {
  const size = { xs: '12', sm: '16' }[_size] ?? 24
  const isRtl = document.documentElement.dir === 'rtl'
  const transform = isRtl && _rtlFlip ? 'transform: scaleX(-1)' : ''

  // Set size on the container. This prevents content shift.
  return h('div', {
    ...props,
    className: undefined, // Suppress.
    'aria-hidden': true,
    style: `width: calc(var(--font-scale) * ${size}px); height: calc(var(--font-scale) * ${size}px);`,
    children: h(SVG, {
      _tall: true,
      _model: { src: children },
      _style: id => `
        ${id} path, ${id} polygon { fill: currentColor; }
        ${id} { ${transform} }
      `
    })
  })
}
