import React from 'react';
import classNames from 'clsx';

import styles from './Pointer.module.scss';

type Props = {
  top?: number;
  left: number;
  color: string;
  saturation?: boolean;
};

function Pointer({ color, left, top = 0.5, saturation = false }: Props) {
  return (
    <div
      className={classNames(styles.Pointer, {
        [styles.Pointer___saturation]: saturation,
      })}
      style={{
        top: `${top * 100}%`,
        left: `${left * 100}%`,
        backgroundColor: color,
      }}
    />
  );
}

export default Pointer;
