import styles from './SelectableRow.module.scss';

export interface SelectableRowProps {
  /** Primary label text (left column) */
  label: string;
  /** Subtitle text displayed below the label */
  subtitle?: string;
  /** Secondary value text (right column) - optional */
  value?: string | number;
  /** Whether the row is selected */
  selected?: boolean;
  /** Click handler */
  onClick?: () => void;
  /** Whether the row is disabled (not clickable) */
  disabled?: boolean;
  /** Whether the row is muted (greyed out but still clickable) */
  muted?: boolean;
  /** Optional status icon displayed after the value */
  statusIcon?: React.ReactNode;
  /** Additional CSS classes */
  className?: string;
}

export const SelectableRow = ({
  label,
  subtitle,
  value,
  selected = false,
  onClick,
  disabled = false,
  muted = false,
  statusIcon,
  className = '',
}: SelectableRowProps) => {
  const handleClick = () => {
    if (!disabled && onClick) {
      onClick();
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {
      e.preventDefault();
      onClick();
    }
  };

  const rowClassName = [
    styles.row,
    selected && styles.selected,
    disabled && styles.disabled,
    muted && styles.muted,
    className,
  ].filter(Boolean).join(' ');

  return (
    <div
      className={rowClassName}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      role="button"
      tabIndex={disabled ? -1 : 0}
      aria-pressed={selected}
      aria-disabled={disabled}
    >
      <div className={styles.labelContainer}>
        <span className={styles.label}>{label}</span>
        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
      </div>
      <div className={styles.valueContainer}>
        {value !== undefined && <span className={styles.value}>{value}</span>}
        {statusIcon && <span className={styles.statusIcon}>{statusIcon}</span>}
      </div>
    </div>
  );
};