import { connect } from "react-redux";
import { Link } from "react-router-dom";

const Projects = ({ snippets }) => {
	return snippets ? (
		<div>
			<div style={{ margin: 10 }}>
				<div>
					<Link to='/cabinet'>
						<button className='btn_search'>Back to Cabinet</button>
					</Link>
				</div>
				<div>
					<Link to='/work'>
						<button className='btn_search' style={{ marginTop: 5 }}>
							New project
						</button>
					</Link>
				</div>
			</div>
			<br />
			<div className='snippet_block'>
				{snippets?.map((key, index) => (
					<div className='snippet'>
						<img src={`${process.env.PUBLIC_URL}/img/code.png`} alt='code'></img>
						<div className='block_content'>
							<p>{`Name: ${snippets?.[index]?.title}` || "Project without name"}</p>
							<p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
							<div className='btn_center'>
								<Link to={"/project/" + snippets?.[index]?._id}>
									<button className='btn_search'>Open project</button>
								</Link>
							</div>
						</div>
					</div>
				))}
			</div>
		</div>
	) : (
		<div>
			<Link to='/'>
				<button className='btn_search'>Back to Main Page</button>
			</Link>{" "}
			<br /> <br />
			<div>
				<span style={{ margin: 10, fontSize: 20 }}>Loading...</span>
			</div>
		</div>
	);
};

const CProjects = connect(state => ({
	snippets: state?.p?.findSnippet?.payload?.data?.SnippetFind,
}))(Projects);
export default CProjects;