import React from "react";

import "./index.scss";

const ServiceCard = ({ title, subtitle, text, logos }) => {
	const displayLogos = logos.split(",").map((logo) => (
		<li key={logo} className="tech-logo">
			<img
				key={logo}
				src={require(`../../images/tech-logos/${logo}.png`).default}
				alt={`${logo} logo`}
				height="30px"
			/>
		</li>
	));

	return (
		<div className="service-card">
			<h1 className="service-card-title">{title}</h1>
			<h2 className="service-card-subtitle">{subtitle}</h2>
			<p className="service-card-text">{text}</p>
			<ul className="tech-logo-list">{displayLogos}</ul>
		</div>
	);
};

export default ServiceCard;
