src/components/auth/form/ConfidenceScale.tsx

'use client';

import { CONFIDENCE_LEVELS } from '@/lib/content/registration-options';

interface ConfidenceScaleProps {
  label: string;
  value: number;
  onChange: (value: number) => void;
}

export default function ConfidenceScale({ label, value, onChange }: ConfidenceScaleProps) {
  return (
    <div style={{ marginBottom: '16px' }}>
      <label
        style={{
          display: 'block',
          fontSize: '14px',
          fontWeight: '600',
          marginBottom: '10px',
          color: '#374151',
        }}
      >
        {label}
      </label>
      {/* Labels row */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: '8px',
        }}
      >
        <span style={{ fontSize: '12px', color: '#6b7280' }}>
          非常沒自信
        </span>
        <span style={{ fontSize: '12px', color: '#6b7280' }}>
          非常有自信
        </span>
      </div>
      {/* Buttons row */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          gap: '4px',
        }}
      >
        {CONFIDENCE_LEVELS.map((level) => (
          <button
            key={level}
            type="button"
            onClick={() => onChange(level)}
            style={{
              flex: 1,
              maxWidth: '40px',
              aspectRatio: '1',
              borderRadius: '50%',
              border: value === level ? '2px solid #2563eb' : '1px solid #d1d5db',
              backgroundColor: value === level ? '#2563eb' : 'white',
              color: value === level ? 'white' : '#374151',
              fontSize: '14px',
              fontWeight: '500',
              cursor: 'pointer',
              transition: 'all 0.2s',
              padding: 0,
            }}
          >
            {level}
          </button>
        ))}
      </div>
    </div>
  );
}