<script lang="ts">
	import type { ServiceConfig } from '$lib/config';
	import { getServiceComponent } from '$lib/services/services';
	import Brand from './Brand.svelte';

	export let service: ServiceConfig;
	export let data: any;

	const component = getServiceComponent(service.type || '');
</script>

<div class="card">
	<div class="card-content">
		<div class="media">
			<div class="media-left">
				<figure class="image">
					<Brand brand={service} />
				</figure>
			</div>
			<div class="media-content">
				<p class="title is-4">{service.title}</p>
				{#if component != undefined}
					<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
				{:else}
					<p class="subtitle is-6">{service.subtitle}</p>
				{/if}
			</div>
		</div>
	</div>
</div>
