import React from 'react';
import ICONS from './paths';

/** Icons that point "forward/backward" and must mirror in right-to-left layouts. */
const DIRECTIONAL = new Set(['chevron-left', 'chevron-right', 'arrow-left', 'arrow-right', 'arrow-up-right', 'log-out', 'send', 'external-link']);

/**
 * Inline SVG icon. Decorative by default (aria-hidden); pass `label` to make it
 * meaningful to screen readers.
 *
 * @param {Object} props
 * @param {string} props.name        Icon key (see paths.js).
 * @param {number} [props.size=16]   Pixel size.
 * @param {string} [props.label]     Accessible label (omit for decorative icons).
 * @param {number} [props.strokeWidth=2]
 * @param {string} [props.className]
 */
export default function Icon({ name, size = 16, label, strokeWidth = 2, className = '', style }) {
	const shapes = ICONS[name];
	if (!shapes) {
		return null;
	}
	const directional = DIRECTIONAL.has(name);
	const a11y = label
		? { role: 'img', 'aria-label': label }
		: { 'aria-hidden': 'true', focusable: 'false' };

	return (
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width={size}
			height={size}
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth={strokeWidth}
			strokeLinecap="round"
			strokeLinejoin="round"
			className={['bp-icon', directional ? 'bp-icon--dir' : '', className].filter(Boolean).join(' ')}
			style={style}
			{...a11y}
		>
			{label ? <title>{label}</title> : null}
			{shapes.map(([tag, attrs], i) => React.createElement(tag, { key: i, ...attrs }))}
		</svg>
	);
}

export const iconNames = Object.keys(ICONS);