---
import Card from "../global/Card.astro";

interface Props {
	title: string;
	tags?: Array<string>;
	primaryColor?: string;
	className?: string;
}

const { title, tags, primaryColor, className = "" } = Astro.props;
---

<div class="mx-auto w-full">
	<Card primaryColor={primaryColor} {className}>
		<div class="px-8 py-8">
			<div class="flex w-full flex-col">
				<h2 class="text-2xl font-bold">{title}</h2>
			</div>
			<hr class="my-3 w-full" />
			<p class="text-left">
				<slot />
			</p>
			<div class="mt-5 flex w-full flex-row flex-wrap justify-start">
				{
					tags?.map((tag, index) => (
						<div
							class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full bg-[#303030] px-3 py-1 text-white transition-colors duration-300`}
						>
							{tag}
						</div>
					))
				}
			</div>
		</div>
	</Card>
</div>