interface ActionCardProps {
  icon: string;
  title: string;
  subtitle: string;
}

export default function ActionCard({ icon, title, subtitle }: ActionCardProps) {
  return (
    <button className="flex flex-col items-center justify-center p-6 bg-white dark:bg-[#1a202c] border border-[#dbe0e6] dark:border-[#2d3748] rounded-xl hover:shadow-md hover:border-primary transition-all group">
      <div className="size-14 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors">
        <span className="material-symbols-outlined text-3xl">{icon}</span>
      </div>
      <p className="text-sm font-bold text-[#111418] dark:text-white">
        {title}
      </p>
      <p className="text-xs text-[#617589] dark:text-gray-400 mt-1">
        {subtitle}
      </p>
    </button>
  );
}