import { getClaviature } from 'claviature';

import React from 'react';

export default function Claviature({ options, onClick, onMouseDown, onMouseUp, onMouseLeave }) {

  const svg = getClaviature({

    options,

    onClick,

    onMouseDown,

    onMouseUp,

    onMouseLeave,

  });

  return (

    <svg {...svg.attributes}>

      {svg.children.map((el, i) => {

        const TagName = el.name;

        const { key, ...attributes } = el.attributes;

        return (

          <TagName key={`${el.name}-${i}`} {...attributes}>

            {el.value}

          </TagName>

        );

      })}

    </svg>

  );

}