import {Pressable, View} from 'react-native'

import {Text} from '@/components/ui/typography'
import {
  atoms as a,
  pressed,
  useTheme,
  type ViewStyleProp,
} from '@/sprinkles'

type ChipProps = {
  label: string
  selected?: boolean
  onPress?: () => void
  style?: ViewStyleProp
}

export const Chip = ({
  label,
  selected,
  onPress,
  style,
}: ChipProps) => {
  const t = useTheme()
  const base = [
    a.py_xs,
    a.px_sm,
    a.rounded_lg,
    a.border,
    t.atoms.border_contrast_medium,
    {
      backgroundColor: selected
        ? t.atoms.bg_contrast_50.backgroundColor
        : t.atoms.bg_contrast_25.backgroundColor,
    },
  ]

  if (!onPress)
    return (
      <View style={[base, style]}>
        <Text emoji>{label}</Text>
      </View>
    )

  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{selected: selected ?? false}}
      hitSlop={8}
      style={({pressed: p}) => [base, p && pressed, style]}
    >
      <Text emoji>{label}</Text>
    </Pressable>
  )
}
