"use client";

import { cn } from "@/lib/utils";
import type { CardMeta } from "@/lib/cards";

interface InfoCardProps {
  meta: CardMeta;
  selected: boolean;
  onClick: () => void;
}

export function InfoCard({ meta, selected, onClick }: InfoCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "group rounded-2xl border p-5 text-left transition",
        selected
          ? "border-amber-400/40 bg-amber-400/10 shadow-lg shadow-amber-500/10"
          : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]",
      )}
    >
      <div className="mb-2 flex items-center gap-2">
        <h3 className="font-medium text-white">{meta.title}</h3>
        {meta.badge ? (
          <span className="rounded-full bg-emerald-400/15 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-emerald-300">
            {meta.badge}
          </span>
        ) : null}
      </div>
      <p className="text-sm text-slate-400">{meta.subtitle}</p>
    </button>
  );
}