import exercises from "../Exercises/exercises.js"; // data source
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Box from "@mui/material/Box";
import  Typography  from "@mui/material/Typography";


let exercises = [
    { arms : [ "bicep curl" , "lat pull down"] },
    { legs : ["squat" , "barbell squat"] },
    { chest : [ "benchpress" , "incline benchpress"] } ,
    { back : ["pull up" , "weighted pull up"] }
]

const Left = (props) => (

    // implicit return 
    
        
        { 
        exercises.map( (obj) => {
            let muscle = Object.keys(obj)[0]; // curr muscle
            let exerciseArr = Object.values(obj)[0]; // exercise array for curr muscle
            {console.log(muscle)}   // works --> thus variable is not the problem 
            return (
                <>
                
                     {muscle}
                
                
                
                    {
                        exerciseArr.map( (exercise) => {
                            console.log(exercise)   // works --> thus variable is not the problem 
                            return (
                                
                                    
                                         {exercise } 
                                    
                                
                            )
                        })
                    }
                
              
                
            )
        })}
      
   
  );

 
export default Left;