import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { CHROME_HORIZONTAL_INSET } from '../theme/chrome-layout';
import { spacing } from '../theme/proulr-theme';

type ChipRowProps = {
  children: React.ReactNode;
  variant?: 'default' | 'onHeader';
};

/** Horizontal filter chip scroller — single chrome style for Discover, inbox, etc. */
export function ChipRow({ children, variant = 'default' }: ChipRowProps) {
  const isHeader = variant === 'onHeader';

  if (!children) {
    return <View style={[styles.content, isHeader && styles.contentOnHeader]} />;
  }

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      style={styles.scroll}
      contentContainerStyle={[styles.content, isHeader && styles.contentOnHeader]}
      keyboardShouldPersistTaps="handled"
      nestedScrollEnabled
    >
      {children}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scroll: {
    flexGrow: 0,
    flexShrink: 0,
    alignSelf: 'stretch',
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
    paddingHorizontal: spacing.sm,
    paddingVertical: 0,
  },
  contentOnHeader: {
    paddingLeft: CHROME_HORIZONTAL_INSET,
    paddingRight: CHROME_HORIZONTAL_INSET,
  },
});