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

type SliderTrackProps = {
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
  range?: [start: number, end: number];
};

export function SliderTrack({ className, style, range, children }: SliderTrackProps) {
  let cl = styles.track;
  if (className) cl += ` ${className}`;
  const rangeStyle = range && {
    left: `calc(${range[0] * 100}% + var(--point-size) / 2)`,
    width: (range[1] - range[0]) * 100 + '%',
  };
  return (
    <div className={cl} style={style}>
      <div className={styles.pointHolder}>
        {rangeStyle && <div className={styles.range} style={rangeStyle} />}
        {children}
      </div>
    </div>
  );
}