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

interface ActionCardProps {
  title: string;
  description?: string;
  icon?: ReactNode;
  onClick?: () => void;
  href?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  className?: string;
}

export function ActionCard({ 
  title, 
  description, 
  icon, 
  onClick, 
  href,
  variant = 'secondary',
  className 
}: ActionCardProps) {
  const content = (
    <Button
      variant={variant}
      onClick={onClick}
      className={cn("flex items-center gap-3 p-6 h-auto text-left justify-start w-full", className)}
    >
      {icon && (
        <div className="flex-shrink-0">
          {icon}
        </div>
      )}
      <div className="flex-1 min-w-0">
        <div className={`font-semibold ${
          variant === 'primary' 
            ? 'text-[var(--primary-foreground)]' 
            : 'text-[var(--foreground)]'
        }`}>
          {title}
        </div>
        {description && (
          <div className={`text-sm ${
            variant === 'primary' 
              ? 'text-[var(--primary-foreground)] opacity-60' 
              : 'text-[var(--muted-foreground)]'
          }`}>
            {description}
          </div>
        )}
      </div>
    </Button>
  );

  if (href) {
    return (
      <a href={href} className="block">
        {content}
      </a>
    );
  }

  return content;
}