---
import Icon from './Icon.astro';

interface Props {
  title: string;
  description: string;
  icon: string;
}
const { title, description, icon } = Astro.props;
---
<div class="group rounded-xl border border-slate-200 bg-white p-5 transition hover:border-green/40 hover:shadow-md">
  <div class="flex h-11 w-11 items-center justify-center rounded-lg bg-green-50 text-green transition group-hover:bg-green group-hover:text-white">
    <Icon name={icon} class="h-6 w-6" />
  </div>
  <h3 class="mt-4 font-semibold text-navy">{title}</h3>
  <p class="mt-1 text-sm text-slate-600">{description}</p>
</div>