<script>import { BEM } from "../../models/BEM";
import CardBody from "../atoms/CardBody.svelte";
import Card from "../atoms/Card.svelte";
import Button from "../atoms/Button.svelte";
import Description from "../atoms/Description.svelte";
const bm = new BEM('UI-SurfaceCard');
bm.append($$props.class);
export let title;
export let description;
export let image;
export let buttonText;
export let buttonUrl;
export let buttonIcon;
export let theme = 'primary';
</script>
<Card class={bm.toString()} style={$$props.style}>
	<CardBody center>
		<img src="{image}" alt="{title}" {title}>
		<Description
			description="Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst."
		/>
		<a href="{buttonUrl}">
			<Button {theme} icon="{buttonIcon}">{buttonText}</Button>
		</a>
		<slot></slot>
	</CardBody>
</Card>
<style>img {
  margin-left: auto;
  margin-bottom: 1.5rem;
  margin-right: auto;
  display: block;
}</style>
