import React from 'react';

interface TemplateCardProps {
  icon: string | React.ReactNode;
  title: string;
  description: string;
  itemsCount?: number;
  onClick: () => void;
  className?: string;
}

/**
 * Unified TemplateCard component for displaying template options
 * across all onboarding wizard steps.
 *
 * Uses global styling and color palette for dark mode compatibility.
 */
export const TemplateCard: React.FC<TemplateCardProps> = ({
  icon,
  title,
  description,
  itemsCount,
  onClick,
  className = '',
}) => {
  return (
    <button
      onClick={onClick}
      className={`text-left p-4 bg-[var(--bg-primary)] dark:bg-[var(--surface-secondary)] border-2 border-purple-200 dark:border-purple-700 rounded-lg hover:border-purple-400 dark:hover:border-purple-500 hover:shadow-md transition-all group ${className}`}
    >
      <div className="flex items-start gap-3">
        {typeof icon === 'string' ? (
          <span className="text-3xl group-hover:scale-110 transition-transform">{icon}</span>
        ) : (
          <span className="group-hover:scale-110 transition-transform">{icon}</span>
        )}
        <div className="flex-1 min-w-0">
          <h4 className="font-medium text-[var(--text-primary)] mb-1">
            {title}
          </h4>
          <p className="text-xs text-[var(--text-secondary)] mb-2">
            {description}
          </p>
          {itemsCount !== undefined && (
            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium">
              {itemsCount} items
            </p>
          )}
        </div>
      </div>
    </button>
  );
};

export default TemplateCard;
