<template>
  <div class="flex flex-col w-full h-full px-5 py-14 card">
    <div class="flex gap-5">
      <div class="flex flex-col gap-[10px]">
        <div class="mb-2 opacity-0">
          <img class="object-cover" :src="icon" alt="icon" />
        </div>
        <img :src="imgUrl" alt="avatar" class="object-cover img" />
      </div>
      <div class="flex flex-col gap-[10px] flex-1">
        <div class="mb-2">
          <img class="object-cover" :src="icon" alt="icon" />
        </div>
        <div class="flex-1 space-y-2">
          <h3 class="text-2xl font-semibold text-white max-w-[215px]">
            {{ title[$i18n.locale] }}
          </h3>
          <h4 class="font-medium text-white">
            {{ subTitle[$i18n.locale] }}
          </h4>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    subTitle: String,
    imgUrl: String,
    icon: String,
  },
};
</script>

<style>
.img {
  height: 67px;
  width: 67px;
  border-radius: 50%;
}
.card {
  background: linear-gradient(252.41deg, #222222 1.57%, #414141 100%);
  box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}
</style>
