'use client';

/**
 * Selectable Card Component
 *
 * A button-based card that can be selected/deselected.
 * Used for complexity, client mode, and autonomy selection.
 */

import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface SelectableCardProps {
  selected: boolean;
  onClick: () => void;
  children: ReactNode;
  className?: string;
  'aria-label'?: string;
}

export function SelectableCard({
  selected,
  onClick,
  children,
  className,
  'aria-label': ariaLabel,
}: SelectableCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={selected}
      aria-label={ariaLabel}
      className={cn(
        'w-full rounded-lg border-2 p-4 text-left transition-all',
        'hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
        selected ? 'border-primary bg-primary/5' : 'border-border',
        className
      )}
    >
      {children}
    </button>
  );
}
