import React from 'react';
import {
  View,
  type ViewProps,
  type ViewStyle,
  type StyleProp,
} from 'react-native';
import { useTheme } from '../hooks/ThemeProvider';

export type RsRowViewProps = {
  /**
   * Custom style for the row container
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Horizontal alignment (alignItems)
   */
  align?: ViewStyle['alignItems'];
  /**
   * Vertical alignment (justifyContent)
   */
  justify?: ViewStyle['justifyContent'];
  /**
   * Row gap (space between children)
   */
  gap?: number;
  /**
   * Optional background color (defaults to theme.Background.screen)
   */
  backgroundColor?: string;
  /**
   * Children to render inside the row
   */
  children?: React.ReactNode;
} & ViewProps;

const RsRowView: React.FC<RsRowViewProps> = ({
  style,
  align = 'center',
  justify = 'flex-start',
  gap = 0,
  backgroundColor,
  children,
  ...rest
}) => {
  const theme = useTheme();
  // Compose the row style
  const rowStyle: ViewStyle = {
    flexDirection: 'row',
    alignItems: align,
    justifyContent: justify,
    backgroundColor: backgroundColor ?? theme.Background.screen,
    gap: gap,
  };

  return (
    <View style={[rowStyle, style]} {...rest}>
      {children}
    </View>
  );
};

export default RsRowView;