calculator/src/widgets/withdrawal-rate-section/ui/WithdrawalRateSection.tsx

import { BaseCard, DescriptionText, DebouncedInputSlider, TEXTS } from '../../../shared';
import { FC } from 'react';

interface WithdrawalRateSectionProps {
  withdrawalRate: number;
  onWithdrawalRateChange: (value: number) => void;
}

export const WithdrawalRateSection: FC<WithdrawalRateSectionProps> = ({
  withdrawalRate,
  onWithdrawalRateChange,
}) => {
  return (
    <BaseCard title={TEXTS.withdrawalRate.title}>
      <div>
        <div className="slider-container">
          <DebouncedInputSlider
            value={withdrawalRate}
            onChange={onWithdrawalRateChange}
            min={0}
            max={100}
            step={5}
            tooltipFormatter={(value: number | undefined) => `${value}%`}
            sliderStyle={{ marginBottom: 0 }}
            unitSuffix="%"
            // marks={{ 0: '0%', 50: '50%', 100: '100%' }} // если понадобится
          />
        </div>
        <DescriptionText>
          {TEXTS.withdrawalRate.description}
        </DescriptionText>
      </div>
    </BaseCard>
  );
};