import React, {FunctionComponent, useState} from "react"

interface LandingDropdownProps {
    title: string
    value: string
    icon: any
    dropdown: any
}

export const LandingDropdown: FunctionComponent<LandingDropdownProps> = (props) => {
    const [open, _setOpen] = useState(false);

    return <div>
        <div className="landing-dropdown" onClick={() => _setOpen(true)}>
            <div className="icon-wrapper">
                {props.icon}
            </div>

            <div className="content">
                <div className="title">{props.title}</div>
                <div className="value">{props.value}</div>
            </div>


            <i className="material-icons text-grey hide-for-medium">
                {open ?
                    "expand_less"
                    :
                    "expand_more"
                }
            </i>
        </div>
        {open && props.dropdown}
    </div>
}