<script lang="ts">
	import Card, { type CardVariants } from "#lib/components/ui/Card.svelte";
	import FollowCardContent from "#lib/components/profile/FollowCardContent.svelte";
	import type { FollowChange, PersonData } from "#lib/components/profile/types.ts";

	let {
		person,
		border = false,
		background = false,
		followButton = true,
		onFollow
	}: {
		person: PersonData;
		onFollow?: (change: FollowChange) => void;
		border?: CardVariants["border"];
		background?: CardVariants["background"];
		followButton?: boolean;
	} = $props();
</script>

<!-- the content picks its layout from the card's width so it still fits when the card is half the page -->
<Card {border} {background} padding={border || background ? "regular" : "none"} class="@container">
	<FollowCardContent {person} {followButton} {onFollow} />
</Card>