import { forwardRef } from 'react';
import { View } from 'react-native';
import type { RsSkinlessRowViewProps } from '../../types/props';

type ViewRef = View;

const ALIGN_MAP = {
  start: 'flex-start',
  center: 'center',
  end: 'flex-end',
  stretch: 'stretch',
} as const;

const JUSTIFY_MAP = {
  start: 'flex-start',
  center: 'center',
  end: 'flex-end',
  between: 'space-between',
  around: 'space-around',
} as const;

const RsRowView = forwardRef<ViewRef, RsSkinlessRowViewProps>(
  ({ children, style, gap, align, justify }, ref) => {
    return (
      <View
        ref={ref}
        style={[
          {
            flexDirection: 'row',
            gap,
            alignItems: align ? ALIGN_MAP[align] : undefined,
            justifyContent: justify ? JUSTIFY_MAP[justify] : undefined,
          },
          style,
        ]}
      >
        {children}
      </View>
    );
  }
);

RsRowView.displayName = 'RsRowView';

export default RsRowView;