mesh-forge/components/ModuleCard.tsx

interface ModuleCardProps {
  name: string
  description: string
  selected: boolean
  onClick: () => void
}

export function ModuleCard({
  name,
  description,
  selected,
  onClick,
}: ModuleCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`
        w-full text-left p-4 rounded-lg border-2 transition-all
        ${
          selected
            ? 'border-blue-500 bg-blue-500/10'
            : 'border-slate-700 bg-slate-900/50 hover:border-slate-600'
        }
      `}
    >
      <div className="flex items-start gap-3">
        <div className="mt-1">
          <div
            className={`
              w-5 h-5 rounded border-2 flex items-center justify-center
              ${selected ? 'border-blue-500 bg-blue-500' : 'border-slate-500'}
            `}
          >
            {selected && (
              <svg
                className="w-3 h-3 text-white"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <title>Checkmark</title>
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={3}
                  d="M5 13l4 4L19 7"
                />
              </svg>
            )}
          </div>
        </div>
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-sm mb-1">{name}</h4>
          <p className="text-xs text-slate-400 leading-relaxed">
            {description}
          </p>
        </div>
      </div>
    </button>
  )
}