import React from 'react';
import { StyleSheet, ViewProps, View, DimensionValue } from 'react-native';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

type ThemedDividerProps = ViewProps & {
  orientation?: 'horizontal' | 'vertical';
  thickness?: DimensionValue;
  length?: DimensionValue;
  color?: string;
};

const ThemedDivider: React.FC<ThemedDividerProps> = ({
  orientation = 'horizontal',
  thickness = 1,
  length = '100%',
  style,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';
  const color = restProps.color || Colors[scheme].border;

  return (
    <View
      style={[
        orientation === 'horizontal'
          ? { height: thickness, width: length }
          : { width: thickness, height: length },
        { backgroundColor: color },
        style,
      ]}
      {...restProps}
    />
  );
};

export default ThemedDivider;