import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
/**
* Компонент ToggleLabel представляет собой переключатель с анимацией.
* @param {Object} props - Свойства компонента.
* @param {string} props.labelText - Текст метки переключателя.
* @returns {JSX.Element} - JSX-элемент компонента ToggleLabel.
*/
const ToggleLabel = ({ labelText }) => {
const [selected, setSelected] = useState(false);
/**
* Обработчик события клика на переключатель.
* Изменяет состояние выбранного значения.
*/
const toggleSelected = () => {
setSelected(!selected);
};
/**
* Варианты анимации для переключателя.
*/
const animationVariants = {
on: { opacity: 1 },
off: { opacity: 0.5 },
};
return (
<AnimatePresence>
<motion.div
initial="off"
animate={selected ? 'on' : 'off'}
variants={animationVariants}
transition={{ type: 'spring', mass: 1, stiffness: 100, damping: 15 }}
onClick={toggleSelected}
className={`inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer ${
selected
? 'bg-primary-300 text-white'
: 'bg-blue-50 text-default-900'
}`}
>
<span className="text-xs font-medium leading-4">{labelText}</span>
</motion.div>
</AnimatePresence>
);
};
export default ToggleLabel;
