import React from 'react';
import styles from './silke-slider.module.scss';

type SilkeSliderPointProps = {
  className?: string;
  dragging: boolean;
  value: number;
  selected?: boolean;
  style?: React.CSSProperties;
  onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
  onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
  onRemove?: () => void;
};

export function SilkeSliderPoint({
  className,
  dragging,
  value,
  selected,
  style: externalStyle,
  onMouseDown,
  onKeyDown,
  onFocus,
}: SilkeSliderPointProps) {
  let cl = styles.handle;
  if (dragging) cl += ` ${styles.dragging}`;
  if (selected) cl += ` ${styles.selected}`;
  if (className) cl += ` ${className}`;

  const style = { left: value * 100 + '%', '--value': value, ...externalStyle };

  return (
    <div
      tabIndex={0}
      className={cl}
      style={style}
      onMouseDown={onMouseDown}
      onKeyDown={onKeyDown}
      onFocus={onFocus}
    />
  );
}