managarten/apps/picture/apps/mobile/components/Button.tsx

import { forwardRef, ReactNode } from 'react';
import { Pressable, PressableProps, View, ActivityIndicator, ViewStyle } from 'react-native';
import { useTheme } from '~/contexts/ThemeContext';
import { Icon } from './Icon';
import { Text } from './Text';

type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline';
type ButtonSize = 'sm' | 'md' | 'lg';

type ButtonProps = {
	title?: string;
	variant?: ButtonVariant;
	size?: ButtonSize;
	icon?: string;
	iconPosition?: 'left' | 'right';
	iconSize?: number;
	iconColor?: string;
	iconWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
	loading?: boolean;
	children?: ReactNode;
	fullWidth?: boolean;
} & PressableProps;

export const Button = forwardRef<View, ButtonProps>(
	(
		{
			title,
			variant = 'primary',
			size = 'md',
			icon,
			iconPosition = 'left',
			iconSize,
			iconColor,
			iconWeight = 'regular',
			loading = false,
			children,
			fullWidth = false,
			onPress,
			className,
			style,
			disabled,
			...pressableProps
		},
		ref
	) => {
		const { theme } = useTheme();

		// Size config
		const sizeConfig = {
			sm: { paddingX: 12, paddingY: 8, fontSize: 14, iconSize: 16 },
			md: { paddingX: 16, paddingY: 12, fontSize: 16, iconSize: 20 },
			lg: { paddingX: 24, paddingY: 16, fontSize: 18, iconSize: 24 },
		};

		const config = sizeConfig[size];

		// Variant colors
		const getVariantStyles = () => {
			const isDisabled = disabled || loading;

			switch (variant) {
				case 'danger':
					return {
						backgroundColor: theme.colors.error,
						textColor: theme.colors.text.inverse,
						iconColor: theme.colors.text.inverse,
					};
				case 'secondary':
					return {
						backgroundColor: theme.colors.secondary.default,
						textColor: theme.colors.secondary.contrast,
						iconColor: theme.colors.secondary.contrast,
					};
				case 'ghost':
					return {
						backgroundColor: 'transparent',
						textColor: theme.colors.primary.default,
						iconColor: theme.colors.primary.default,
					};
				case 'outline':
					return {
						backgroundColor: 'transparent',
						textColor: theme.colors.primary.default,
						iconColor: theme.colors.primary.default,
						borderColor: theme.colors.primary.default,
						borderWidth: 1,
					};
				default: // primary
					return {
						backgroundColor: theme.colors.primary.default,
						textColor: theme.colors.primary.contrast,
						iconColor: theme.colors.primary.contrast,
					};
			}
		};

		const variantStyles = getVariantStyles();

		// Build styles
		const buttonStyles: ViewStyle = {
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'center',
			paddingHorizontal: config.paddingX,
			paddingVertical: config.paddingY,
			borderRadius: 8,
			backgroundColor: variantStyles.backgroundColor,
			...(variantStyles.borderWidth && {
				borderWidth: variantStyles.borderWidth,
				borderColor: variantStyles.borderColor,
			}),
			...(fullWidth && { width: '100%' }),
			...(disabled || loading ? { opacity: theme.opacity.disabled } : {}),
			...(style as ViewStyle),
		};

		const handlePress = (e: any) => {
			if (onPress && !disabled && !loading) {
				onPress(e);
			}
		};

		// Determine icon size and color
		const actualIconSize = iconSize || config.iconSize;
		const actualIconColor = iconColor || variantStyles.iconColor;

		const renderContent = () => {
			if (children) {
				return children;
			}

			return (
				<>
					{loading && (
						<ActivityIndicator
							size="small"
							color={actualIconColor}
							style={{ marginRight: title ? 8 : 0 }}
						/>
					)}
					{!loading && icon && iconPosition === 'left' && (
						<Icon
							name={icon}
							size={actualIconSize}
							color={actualIconColor}
							weight={iconWeight}
							style={{ marginRight: title ? 8 : 0 }}
						/>
					)}
					{title && (
						<Text
							variant="button"
							weight="semibold"
							align="center"
							style={{
								color: variantStyles.textColor,
								fontSize: config.fontSize,
							}}
						>
							{title}
						</Text>
					)}
					{!loading && icon && iconPosition === 'right' && (
						<Icon
							name={icon}
							size={actualIconSize}
							color={actualIconColor}
							weight={iconWeight}
							style={{ marginLeft: title ? 8 : 0 }}
						/>
					)}
				</>
			);
		};

		return (
			<Pressable
				ref={ref}
				{...pressableProps}
				disabled={disabled || loading}
				onPress={handlePress}
				style={({ pressed }) => [
					buttonStyles,
					pressed && !disabled && !loading && { opacity: theme.opacity.pressed },
				]}
				className={className}
			>
				{renderContent()}
			</Pressable>
		);
	}
);

Button.displayName = 'Button';