import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import MoreOrLess from '../shared/MoreOrLess';

interface IProps {
    label: string | JSX.Element;
    linkTo: string | object;
    moreLessRef?: React.MutableRefObject<HTMLElement>;
}

const ReviewItem: React.FunctionComponent<IProps> =  (props) => {
    const [ref, setRef] = useState(null as React.MutableRefObject<HTMLElement>);

    useEffect(() => {
        setRef(props.moreLessRef);
    }, [props.moreLessRef]);

    return(
        <li>
            <h3 className="subheading subheading-sm subheading-flush">
                <Link to={props.linkTo}>
                    <strong>{props.label}</strong>
                </Link>
                {ref && ref.current && <MoreOrLess tagRef={ref}/>}
            </h3>
            {props.children}
        </li>
    );
};

export default ReviewItem;
