/* global React */
const { useState } = React;

const ICONS = {
  search: 'M11 4a7 7 0 1 0 4.9 12l4.3 4.3 1.4-1.4-4.3-4.3A7 7 0 0 0 11 4zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z',
  heart:  'M12 21s-8-5.3-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.7-8 11-8 11z',
  heartF: 'M12 21s-8-5.3-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.7-8 11-8 11z',
  user:   'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c0-4.4 3.6-8 8-8s8 3.6 8 8',
  close:  'M6 6l12 12M18 6L6 18',
  menu:   'M4 6h16M4 12h16M4 18h16',
  arrow:  'M5 12h14M13 6l6 6-6 6',
  external:'M15 3h6v6M14 10l7-7M9 21H3v-6M10 14l-7 7',
  star:   'M12 2l3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21l1.5-7.5L1.5 9h7z',
  chevron:'M6 9l6 6 6-6',
};
function Icon({ name, size = 20, fill, style }) {
  const d = ICONS[name]; const filled = name === 'heartF';
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
      fill={filled ? (fill || 'currentColor') : 'none'}
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={d}/>
    </svg>
  );
}
Object.assign(window, { Icon });