import { Card } from "@/components/card";
import { IconComponent, IconMark, getServiceIcon } from "@/components/icon-system";
import { FadeItem } from "@/components/reveal";

type FeatureCardProps = {
  title: string;
  description: string;
  icon?: IconComponent;
  iconKey?: string;
};

export function FeatureCard({ title, description, icon, iconKey }: FeatureCardProps) {
  const Icon = icon ?? getServiceIcon(iconKey);

  return (
    <FadeItem>
      <Card>
        <IconMark icon={Icon} className="mb-6 group-hover:-translate-y-0.5 group-hover:border-primary/30 group-hover:bg-primary-50" />
        <h3 className="text-lg font-semibold leading-7 text-slate-950">{title}</h3>
        <p className="mt-3 text-sm leading-6 text-slate-600">{description}</p>
      </Card>
    </FadeItem>
  );
}