type PersonCardProps = {
	name: string;
	role: string;
	imageUrl: string;
};

export default function PersonCard({ name, role, imageUrl }: PersonCardProps) {
	return (
		<div className="w-24 flex-shrink-0 space-y-2">
			<div className="relative">
				<img
					src={imageUrl || "/people-placeholder.svg"}
					alt={name}
					className="h-24 w-24 rounded-full border-2 border-border/50 object-cover"
				/>
			</div>
			<div className="text-center">
				<p className="truncate font-medium text-foreground text-sm">{name}</p>
				<p className="truncate text-muted-foreground text-xs">{role}</p>
			</div>
		</div>
	);
}
