<script lang="ts" setup>
defineProps<{
  title: string
  mainColor: string
  subColor: string
  url: string
  icon: string[]
}>()
</script>

<template>
  <div class="mb-4 flex justify-between text-2xl font-bold text-white">
    <div :class="mainColor" class="w-max overflow-hidden rounded-2xl bg-rose-500 flex justify-center items-center">
      <div :class="[subColor]" class="rounded-2xl px-4 py-2 w-14 text-center flex justify-center items-center h-full">
        <font-awesome-icon :icon="icon"/>
      </div>
      <span class="px-4">{{ title }}</span>
    </div>
    <a :class="[mainColor]" :href="url" class="rounded-2xl px-4 py-2">
      <font-awesome-icon :icon="['fas', 'chevron-right']"/>
    </a>
  </div>
</template>

<style scoped>

</style>