text: import {
  	Fragment,
  	createElement,
  	Component,
  	useRef,
  	useEffect,
  	useState,
  } from '@wordpress/element'
  import classnames from 'classnames'
  import { getDefaultFonts } from './default-data'
  import { humanizeVariations, findSelectedFontFamily } from './helpers'
  import { animated } from '@react-spring/web'
  
  const VariationsList = ({ option, value, onChange, typographyList, props }) => {
  	const selectedFontFamily = findSelectedFontFamily(
  		value.family,
  		typographyList
  	)
  
  	const parentEl = useRef(null)
  
  	useEffect(() => {
  		if (!selectedFontFamily) {
  			return
  		}
  
  		parentEl.current.scrollTop =
  			(
  				parentEl.current.children[
  					selectedFontFamily.all_variations.indexOf(value.variation)
  				] || parentEl.current.children[0]
  			).offsetTop - parentEl.current.offsetTop
  	}, [selectedFontFamily])
  
  	return (
  		<animated.ul
  			style={props}
  			className="ct-typography-variations"
  			ref={parentEl}>
  			{selectedFontFamily &&
  				selectedFontFamily.all_variations.map((variation) => (
  					<li
  						onClick={() =>
  							onChange({
  								...value,
  								variation,
  							})
  						}
  						className={classnames({
  							active: variation === value.variation,
  						})}
  						key={variation}>
  						<span
  							className="ct-variation-name"
  							data-variation={variation}>
  							{humanizeVariations(variation)}
  						</span>
  					</li>
  				))}
  		</animated.ul>
  	)
  }
  
  export default VariationsList
  