// Metro module 9605 (f9606).
import { memo } from "react";
import { View } from "react-native";
import GIFPickerViewStore from "../../../stores/views/GIFPickerViewStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStoresArray } from "../../../_bundle/Module589";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  suggestionsContainer: {
    justifyContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: Module712.space.PX_8
  },
  footerSuggestionsContainer: {
    justifyContent: "flex-start",
    paddingVertical: Module712.space.PX_16
  },
  footerSuggestionsTitle: {
    marginBottom: Module712.space.PX_16,
    textAlign: "center"
  }
});
const r46 = memo(function GIFPickerSearchSuggestions(props) {
  const onClickSuggestion = props.onClickSuggestion;
  const styles = useStyles();
  const stateFromStoresArray = useStateFromStoresArray([GIFPickerViewStore], () => GIFPickerViewStore.getSuggestions());
  return stateFromStoresArray.length !== 0 ? <View style={styles.footerSuggestionsContainer}>
    <Text style={styles.footerSuggestionsTitle} variant="text-md/medium" color="text-default">
      {intl.string(t["3JGJo2"])}
    </Text>
    <View style={styles.suggestionsContainer}>
      {stateFromStoresArray.map((item) => {
        return <Button key={item} size="sm" variant="secondary" hitSlop={Module712.space.PX_8} text={item} onPress={() => onClickSuggestion(item)} />;
      })}
    </View>
  </View> : null;
});
export default r46;