import React from 'react';
import { StyleSheet, TextStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLPickerEmptyComponentStyles = {
  text: TextStyle;
};

export type LLPickerEmptyComponentProps =
  ComponentStyleProp<LLPickerEmptyComponentStyles>;

export function LLPickerEmptyComponent({
  styles: stylesProp,
}: LLPickerEmptyComponentProps) {
  const styles = useStyles({
    componentStylesFn: getEmptyPickerStyles,
    stylesProp,
  });
  return <LLText style={styles.text}>No items found!</LLText>;
}

const getEmptyPickerStyles: LLComponentStyleFn<
  LLPickerEmptyComponentStyles
> = ({ theme }) =>
  StyleSheet.create({
    text: {
      padding: 10,
      color: theme.text,
    },
  });