src/components/mode-selection/ModeCard.tsx

"use client";

/**
 * Mode Card Component
 * Individual mode selection card with chips and action button
 */

import { ModeCard as ModeCardType } from "./modeSelectionTypes";

interface ModeCardProps {
  card: ModeCardType;
  onSelect: (mode: ModeCardType["id"]) => void;
}

export function ModeCard({ card, onSelect }: ModeCardProps) {
  return (
    <button
      type="button"
      onClick={() => onSelect(card.id)}
      aria-label={`Select ${card.title} mode`}
      className="group relative w-full max-w-md p-6 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-left transition-all duration-200 hover:border-white/20"
    >
      <div className="flex items-start justify-between mb-4">
        <div className="mb-2 grid h-12 w-12 place-items-center rounded-lg border border-white/10 bg-white/[0.04] text-sm font-bold tracking-tight text-white/72">
          {card.icon}
        </div>
        <div className="text-xs text-white/40 group-hover:text-white/60 transition-colors">
          {card.kicker}
        </div>
      </div>
      
      <h2 className="text-xl font-semibold text-white mb-2">
        {card.title}
      </h2>
      
      <p className="text-sm text-white/60 mb-4 leading-relaxed">
        {card.subtitle}
      </p>
      
      <div className="flex flex-wrap gap-2 mb-4">
        {card.exampleChips.slice(0, 3).map((chip, index) => (
          <span
            key={index}
            className="text-xs px-3 py-1.5 bg-white/5 text-white/70 rounded-full"
          >
            {chip}
          </span>
        ))}
      </div>
      
      <div className="text-sm text-white/90 font-medium group-hover:text-white transition-colors">
        {card.primaryAction} -&gt;
      </div>
    </button>
  );
}