import React from 'react';

import Markup from './styled';

type Props = {
  id?: string;
  position: Record<string, number>;
  bdcolor: string;
  opacity: number;
  markupType: string;
  isCovered?: boolean;
  scale: number;
  onMouseOver?: () => void;
  onMouseOut?: () => void;
};

const index: React.FC<Props> = ({
  id,
  position,
  bdcolor,
  opacity,
  markupType,
  isCovered,
  scale,
  onMouseOver,
  onMouseOut,
}: Props) => (
  <Markup
    id={id}
    position={position}
    bdcolor={bdcolor}
    opacity={opacity}
    markupType={markupType}
    isCovered={isCovered}
    scale={scale}
    onMouseOver={onMouseOver}
    onMouseOut={onMouseOut}
    onFocus={() => {
      /* to do something */
    }}
    onBlur={() => {
      /* to do something */
    }}
  />
);

export default index;