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

export type LLWidgetSeparatorStyles = {
  container: ViewStyle;
};

export type LLWidgetSeparatorProps =
  ComponentStyleProp<LLWidgetSeparatorStyles>;

export function LLWidgetSeparator({
  styles: stylesProp,
}: LLWidgetSeparatorProps) {
  const separatorStyles = useStyles({
    componentStylesFn: getWidgetSeparatorStyles,
    stylesProp,
  });

  return <View style={separatorStyles.container}></View>;
}

const getWidgetSeparatorStyles: LLComponentStyleFn<LLWidgetSeparatorStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    container: {
      marginBottom: 12,
    },
  });