import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import { connect } from 'react-redux';
import { RecipeReviewCard as Card } from './card';

// урл бека
const url = 'http://hipstagram.node.ed.asmer.org.ua/'

// сам item для поста
const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
    width: 500
}))

function Feed({ posts = [] }) {
    return (
        <Box sx={{
            width: '500',
            height: '600',
            margin: '10, 20'
        }}>
            {/* spacing - это отступ между карточками в ленте */}
            <Stack spacing={1}>
                {posts.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
            </Stack>
        </Box >
    )
}

export const ReduxFeed = connect(state => ({ posts: state.PostsFind.payload }))(Feed)