---
import Avatar from '@ui/Avatar.astro';
import AvatarList from '@ui/AvatarList.astro';
import Progress from '@ui/Progress.astro';

interface Props {
	title?: string;
	date?: string;
	stageColor?: string;
	stage?: string;
	projectColor?: string;
	percentage?: number | string;
	percentageColor?: string;
	avatarOffset?: number;
	avatarLimit?: number;
}

const {
	title = 'New website',
	date = '28 Aug 2019',
	stageColor = 'green',
	stage = 'Waiting',
	projectColor,
	percentage,
	percentageColor,
	avatarOffset,
	avatarLimit,
} = Astro.props;
---

<div class="card">
	<div class="card-body p-4 py-5 text-center">
		<Avatar size="xl" placeholder="W" class="mb-4" color={projectColor} />
		<h3 class="mb-0">{title}</h3>
		<p class="text-secondary">Due to: {date}</p>
		<p class="mb-3">
			<span class={`badge bg-${stageColor}-lt`}>{stage}</span>
		</p>
		<div>
			<AvatarList stacked offset={avatarOffset} limit={avatarLimit} />
		</div>
	</div>
	<Progress class="card-progress" value={percentage} color={percentageColor} />
</div>