src/components/ActionButton.tsx

import React from 'react';

interface ActionButtonProps {
  label: string;
  onClick: () => void;
  color: string;
  icon: string;
  disabled?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({ label, onClick, color, icon, disabled = false }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        w-full p-6 rounded-2xl font-semibold text-white shadow-lg 
        transform transition-all duration-200 hover:scale-105 hover:shadow-xl
        active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed
        disabled:hover:scale-100 disabled:hover:shadow-lg
        flex flex-col items-center gap-2 text-lg
      `}
      style={{ 
        backgroundColor: disabled ? '#9CA3AF' : color,
        background: disabled ? '#9CA3AF' : `linear-gradient(135deg, ${color}, ${color}dd)`
      }}
    >
      <span className="text-3xl">{icon}</span>
      <span>{label}</span>
      {!disabled && (
        <div className="w-full h-1 bg-white/20 rounded-full mt-2">
          <div className="w-0 h-full bg-white/40 rounded-full hover:w-full transition-all duration-300"></div>
        </div>
      )}
    </button>
  );
};

export default ActionButton;