import '../css/SearchResult.css'
import { config } from "../main";

import Heart from '../icons/Heart';
import Deodorant from '../icons/Deodorant';
import Contact from '../icons/Contact';
import ArrowRight from '../icons/ArrowRight';

function SearchResult(props) {
	const { id,
		title,
		author,
		likes,
		dislikes,
		comments,
		shares,
	} = props;

	return (
		<div className="search-result">
			<img src={`${config.serverURL}/video/${id}/thumbnail`} className="search-result-thumbnail" />
			<div className="search-result-details">
				<h1>{title}</h1>
				<p>{author}</p>
				<div className="search-result-interactions">
					<span className="search-result-interaction">
						<Heart size={30} />
						<span className="search-result-interaction-count">{likes}</span>
					</span>
					<span className="search-result-interaction">
						<Deodorant size={30} />
						<span className="search-result-interaction-count">{dislikes}</span>
					</span>
					<span className="search-result-interaction">
						<Contact size={30} />
						<span className="search-result-interaction-count">{comments}</span>
					</span>
					<span className="search-result-interaction">
						<ArrowRight size={30} />
						<span className="search-result-interaction-count">{shares}</span>
					</span>
				</div>
			</div>
		</div>
	)
}

export default SearchResult