---
/**
 * A feature highlight card with icon, title, and description.
 * Pure Astro component: no client-side JavaScript.
 */
import Icon from "../react/Icon";

interface Props {
  icon: Parameters<typeof Icon>[0]["name"];
  title: string;
  description: string;
}

const { icon, title, description } = Astro.props;
---

<div class="group rounded-xl border border-border bg-frosted-glass p-6 backdrop-blur-xl transition-all duration-300 hover:border-accent/30">
  <div class="mb-3 flex items-center gap-3">
    <Icon name={icon} size={24} className="text-accent" />
    <h3 class="text-xl font-semibold text-foreground">{title}</h3>
  </div>
  <p class="text-lg leading-relaxed text-muted">{description}</p>
</div>
