import React from "react";
import PropTypes from 'prop-types';
import componentGroups from "../../docs-utils/componentGroups";
import componentCategories from "../../docs-utils/componentCategories";
import variableDetails from "../../interal-variables/index";

export default function Variables(props){

  let { propertyName, propertyType , propertyStyle, propertyList, propertyDisplayName, propertyFilter } =  variableDetails[props.type] || {};

  return <React.Fragment>
    {Object.keys(propertyList).map((item,index)=>{

      if(propertyFilter && !propertyFilter(item,propertyType)){
        return null;
      }
      let itemValue = propertyList[item];

      let displayName = propertyDisplayName.replace("{0}", itemValue);

      return <div title={displayName} key={index} className={propertyStyle}  style={{ [propertyName] : itemValue }}>{props.content}</div>


    })}
  </React.Fragment>
}

Variables.propTypes={
  type : PropTypes.string
}

if(__DOCS__){
  Variables.docs={
    componentGroup: componentGroups.Atom,
    folderName : componentCategories.General
  }
}


