<script setup lang="ts">
defineProps<{ title: string }>();
</script>

<template>
  <div
    class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 transition-[transform,border-color] duration-[180ms] ease-in-out hover:-translate-y-[3px] hover:border-emerald-400/40"
  >
    <div
      class="mb-4 inline-flex h-[42px] w-[42px] items-center justify-center rounded-[10px] bg-emerald-500/10 text-emerald-400"
    >
      <slot name="icon" />
    </div>
    <h3 class="m-0 mb-[7px] text-lg font-semibold text-zinc-50">{{ title }}</h3>
    <p class="m-0 text-[14.5px] leading-[1.55] text-zinc-400"><slot /></p>
  </div>
</template>
