---
to: <%- route -%>.tsx
---
import { useCallback, useState } from 'react';
import type { FC } from 'react';
import s from './styles.module.css';

interface Props {
  id: string;
  className: string;
  label?: string;
  showLabel?: boolean;
  step?: number;
}

const Button: FC<Props> = ({
  id,
  className,
  label = 'Counter',
  showLabel = true,
  step = 1,
}) => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback(() => {
    setCounter((prev) => prev + step);
  }, [step]);

  const decrementCounter = useCallback(() => {
    setCounter((prev) => prev - step);
  }, [step]);

  const counterLabel = showLabel ? `${label}: ${counter}` : String(counter);

  return (
    <div className={className} id={id}>
      <div className={s.wrapper}>
        <button className={`${s.btn} ${s.dec}`} onClick={decrementCounter}>
          <span className={s.text}>-</span>
        </button>
        <span className={s.text}>{counterLabel}</span>
        <button className={`${s.btn} ${s.inc}`} onClick={incrementCounter}>
          <span className={s.text}>+</span>
        </button>
      </div>
    </div>
  );
};

export default Button;

