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;
}
