import React from "react";

import { Showcase } from "../../../utils/apiTypes";
import { Card, PlaceholderCard } from "./Card";

interface NetworkSectionProps {
	title: string;
	icon?: JSX.Element;
	iconColor?: string;
	networks?: Showcase[];
}

export const NetworkSection = ({
	title,
	icon,
	iconColor,
	networks,
}: NetworkSectionProps): JSX.Element => {
	return (
		<div className="margin-top--lg container">
			<div
				className="margin-bottom--sm"
				style={{
					display: "flex",
					alignItems: "center",
				}}
			>
				<h2>{title}</h2>
				{icon && (
					<span
						style={{
							marginBottom: "0.5rem",
							marginLeft: "0.5rem",
							fontSize: "1.25rem",
							lineHeight: "1.75rem",
							color: iconColor,
						}}
					>
						{icon}
					</span>
				)}
			</div>
			<ul
				style={{
					position: "relative",
					display: "grid",
					gap: "1.5rem",
					gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
					paddingLeft: "0",
				}}
			>
				{networks ? (
					<>
						{networks.map((network) => (
							<Card key={network.title} network={network} />
						))}
						{networks.length === 0 && <h2>No result</h2>}
					</>
				) : (
					<div>
						<PlaceholderCard />
					</div>
				)}
			</ul>
		</div>
	);
};