import React from 'react';
import { DivideIcon as LucideIcon } from 'lucide-react';
interface TouchOptimizedButtonProps {
children: React.ReactNode;
onClick?: () => void;
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
icon?: LucideIcon;
disabled?: boolean;
loading?: boolean;
className?: string;
fullWidth?: boolean;
}
const TouchOptimizedButton: React.FC<TouchOptimizedButtonProps> = ({
children,
onClick,
variant = 'primary',
size = 'md',
icon: Icon,
disabled = false,
loading = false,
className = '',
fullWidth = false
}) => {
const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 touch-manipulation select-none';
const variantClasses = {
primary: 'bg-gradient-to-r from-primary-500 to-secondary-500 text-white hover:from-primary-600 hover:to-secondary-600 active:from-primary-700 active:to-secondary-700 shadow-lg hover:shadow-xl',
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300',
outline: 'border-2 border-primary-500 text-primary-600 hover:bg-primary-50 active:bg-primary-100',
ghost: 'text-gray-600 hover:bg-gray-100 active:bg-gray-200'
};
const sizeClasses = {
sm: 'px-3 py-2 text-sm min-h-[36px]',
md: 'px-4 py-3 text-base min-h-[44px]',
lg: 'px-6 py-4 text-lg min-h-[52px]'
};
const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
const fullWidthClasses = fullWidth ? 'w-full' : '';
const classes = [
baseClasses,
variantClasses[variant],
sizeClasses[size],
disabled || loading ? disabledClasses : '',
fullWidthClasses,
className
].filter(Boolean).join(' ');
return (
<button
onClick={onClick}
disabled={disabled || loading}
className={classes}
>
{loading ? (
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-current mr-2" />
) : Icon ? (
<Icon className="h-5 w-5 mr-2" />
) : null}
{children}
</button>
);
};
export default TouchOptimizedButton;