<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="flex w-max items-center justify-center overflow-hidden rounded-2xl">
      <div :class="[subColor]" class="flex h-full w-14 items-center justify-center rounded-2xl px-4 py-2 text-center">
        <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>