import { ArrowUpRight } from 'lucide-react';
const ModuleCard = ({ title, description, icon: Icon, badge, onClick }) => (
  <button onClick={onClick} className="glass-panel group min-h-32 p-4 text-left transition hover:-translate-y-1 hover:border-cyan-400/30 hover:bg-cyan-400/[.04]">
    <div className="flex items-start justify-between">
      <div className="grid h-9 w-9 place-items-center rounded-lg bg-white/[.04] text-cyan-300"><Icon className="h-5 w-5" /></div>
      <ArrowUpRight className="h-4 w-4 text-slate-700 transition group-hover:text-cyan-300" />
    </div>
    <div className="mt-5 font-medium text-slate-100">{title}</div>
    <div className="mt-1 text-xs leading-relaxed text-slate-500">{description}</div>
    {badge && <span className="mt-3 inline-block text-[9px] uppercase tracking-widest text-cyan-400">{badge}</span>}
  </button>
);
export default ModuleCard;