freya/apps/freya-client/src/components/ui/button.tsx

import Feather from "@expo/vector-icons/Feather"
import { type PressableProps, Pressable, type StyleProp, View, type ViewStyle } from "react-native"
import tw from "twrnc"

import { SansSerifText } from "./sans-serif-text"

type FeatherIconName = React.ComponentProps<typeof Feather>["name"]

type ButtonIconProps = {
	name: FeatherIconName
}

function ButtonIcon({ name }: ButtonIconProps) {
	return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
}

type ButtonProps = Omit<PressableProps, "children" | "style"> & {
	label?: string
	leadingIcon?: React.ReactNode
	style?: StyleProp<ViewStyle>
	trailingIcon?: React.ReactNode
}

export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
	const hasIcons = leadingIcon != null || trailingIcon != null

	const textElement = label ? (
		<SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>
			{label}
		</SansSerifText>
	) : null

	return (
		<Pressable
			style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit flex items-center justify-center`, style]}
			{...props}
		>
			{hasIcons ? (
				<View style={tw`flex-row items-center gap-1.5`}>
					{leadingIcon}
					{textElement}
					{trailingIcon}
				</View>
			) : (
				textElement
			)}
		</Pressable>
	)
}

Button.Icon = ButtonIcon