import React from 'react';

export interface CardProps {
  className?: string;
  onClick?: () => void;
  children: React.ReactNode;
}

export function Card({ className = '', onClick, children }: CardProps) {
  const isInteractive = typeof onClick === 'function';

  const classes = [
    'bg-surface-elevation-1 rounded-m p-l',
    'shadow-[0_1px_3px_rgba(0,0,0,0.1)]',
    isInteractive
      ? 'cursor-pointer hover:scale-[1.01] active:scale-[0.99] transition-transform duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--btn-primary-bg)] focus-visible:ring-offset-2'
      : '',
    className,
  ].filter(Boolean).join(' ');

  if (isInteractive) {
    return (
      <div
        role="button"
        tabIndex={0}
        className={classes}
        onClick={onClick}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick();
          }
        }}
      >
        {children}
      </div>
    );
  }

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