<script setup lang="ts">
import { Column, Container, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'

import StyledTemplate from '../../shared/StyledTemplate.vue'

defineProps<{
	title?: string
}>()
</script>

<template>
	<StyledTemplate :title="title">
		<Section class="bg-white pb-8 pl-8 pr-8 pt-8">
			<Container class="max-w-[700px]">
				<Row class="mb-8">
					<Column>
						<Row class="mb-4">
							<Column class="w-1/3">
								<Img
									src="https://cdn.modrinth.com/email/bd3357dfae4b1d266250372db3a0988f.png"
									width="120"
									alt="Modrinth Logo"
									class="block h-auto"
								/>
							</Column>
							<Column class="w-2/3 text-right align-top">
								<Text class="m-0 mb-2 text-2xl text-base font-bold"> Rinth, Inc. </Text>
							</Column>
						</Row>

						<Section class="border-t-2 border-brand pt-6">
							<slot />
						</Section>
					</Column>
				</Row>
			</Container>
		</Section>

		<Section class="border-t border-divider bg-bg pb-4 pl-8 pr-8 pt-4">
			<Container class="max-w-[700px]">
				<Row>
					<Column class="text-center">
						<Text class="text-muted m-0 text-xs">
							This document was generated by Modrinth. For questions, contact
							<VLink href="mailto:support@modrinth.com" class="text-blue"
								>support@modrinth.com</VLink
							>
						</Text>
					</Column>
				</Row>
			</Container>
		</Section>
	</StyledTemplate>
</template>
