<template>
    <view class="mt-24 p-28 flex items-center gap-24 bg-back-light rounded-10" :class="props.customClass">
        <ie-image :src="target.universityLogo" custom-class="w-80 h-80"/>
        <view class="flex-1">
            <view class="text-28 text-fore-title font-bold">{{ target.universityName }}</view>
            <view class="flex items-center gap-8">
                <view class="mt-8 w-fit text-20 text-primary border border-solid border-primary rounded-4 px-10 py-4">
                    {{ target.majorName }}
                </view>
                <view v-if="target.majorGroup" class="mt-8 w-fit text-20 text-info border border-solid border-info rounded-4 px-10 py-4">
                    {{ target.majorGroup }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import {VOLUNTARY_TARGET} from "@/types/injectionSymbols";
import {SelectedUniversityMajor} from "@/types/voluntary";

const props = defineProps<{
    customClass?: string;
}>();
const target = inject(VOLUNTARY_TARGET) || ref({} as SelectedUniversityMajor)
</script>

<style scoped>

</style>