import React from 'react';

interface TerminalCardProps {
  children: React.ReactNode;
  variant?: 'default' | 'elevated' | 'bordered';
  size?: 'compact' | 'default' | 'spacious';
  className?: string;
  onClick?: () => void;
}

/**
 * TerminalCard - A dense, terminal-styled card component
 *
 * Variants:
 * - default: Transparent background with subtle border
 * - elevated: Darker background for depth
 * - bordered: Prominent border for emphasis
 *
 * Sizes:
 * - compact: 8px padding (dense)
 * - default: 12px padding (balanced)
 * - spacious: 16px padding (roomy)
 */
export const TerminalCard: React.FC<TerminalCardProps> = ({
  children,
  variant = 'default',
  size = 'default',
  className = '',
  onClick,
}) => {
  const variantClasses = {
    default: 'bg-term-bg border-term-border-subtle',
    elevated: 'bg-term-elevated border-term-border',
    bordered: 'bg-term-bg border-term-border',
  };

  const sizeClasses = {
    compact: 'p-term-sm',
    default: 'p-term-md',
    spacious: 'p-term-lg',
  };

  const interactiveClasses = onClick
    ? 'cursor-pointer hover:border-term-border-focus transition-colors duration-150'
    : '';

  const classes = [
    'rounded-lg border font-mono',
    variantClasses[variant],
    sizeClasses[size],
    interactiveClasses,
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={classes} onClick={onClick}>
      {children}
    </div>
  );
};
