/**
 * A visitor's face: a coloured circle with one of the expressions in faces.js.
 * Decorative only; the generated name next to it carries the meaning.
 */
import { FACES, FACE_PAINT, FACE_TRANSFORM } from './faces';
import { identity } from './identity';

export default function VisitorFace( { visitorId, size = 36 } ) {
	const { face, color } = identity( visitorId );

	return (
		<svg className="sa-face" width={ size } height={ size } viewBox="0 0 32 32" aria-hidden="true" focusable="false">
			<circle cx="16" cy="16" r="16" fill={ color } />
			<g transform={ FACE_TRANSFORM }>
				{ FACES[ face ].map( ( { kind, el: Part, ...shape }, i ) => (
					<Part key={ i } { ...shape } { ...FACE_PAINT[ kind ] } />
				) ) }
			</g>
		</svg>
	);
}