import React, { useState } from 'react';
import NtrpRange from './index';

const StyleTest: React.FC = () => {
  const [value, setValue] = useState<[number, number]>([2.0, 4.0]);

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>NtrpRange 样式测试</h1>
      
      <div style={{ marginBottom: '30px' }}>
        <h2>NTRP 水平区间选择器</h2>
        <NtrpRange
          min={2.0}
          max={4.0}
          step={0.5}
          value={value}
          onChange={setValue}
        />
        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
          当前选择范围: {value[0]} - {value[1]}
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>自定义范围选择器</h2>
        <NtrpRange
          min={0}
          max={100}
          step={1}
          value={[20, 80]}
          onChange={(val) => console.log('Custom range:', val)}
        />
        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
          固定范围: 20 - 80
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>禁用状态</h2>
        <NtrpRange
          min={1}
          max={10}
          step={1}
          value={[3, 7]}
          disabled={true}
        />
        <div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
          此选择器已被禁用
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>样式说明</h2>
        <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
          <p>✅ 网球图标 + "NTRP水平区间"标题</p>
          <p>✅ 左右范围标签（"2.0及以下"、"4.0及以上"）</p>
          <p>✅ 圆角矩形轨道容器，带有边框和阴影</p>
          <p>✅ 白色圆形滑块手柄，黑色边框和阴影</p>
          <p>✅ 黑色轨道填充条</p>
          <p>✅ 五个浅灰色标记点</p>
        </div>
      </div>
    </div>
  );
};

export default StyleTest;