import React from 'react';
import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
import SegmentedItem from './SegmentedItem';
import { StyledSegmentedControlWrapper } from './StyledSegmentedControl';
import type { SegmentedControlItemConfig } from './types';

export interface SegmentedControlProps extends ViewProps {
  /**
   * The size of the segmented control.
   */
  size?: 'medium' | 'large';
  /**
   * The items to display in the segmented control.
   */
  items: SegmentedControlItemConfig[];
  /**
   * The value of the selected item.
   */
  value: string;
  /**
   * Test ID for testing purposes.
   */
  testID?: string;
  /**
   * The style of the segmented control.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * The callback function to be called when the selected item changes.
   */
  onItemPress: (item: SegmentedControlItemConfig) => void;
}

const SegmentedControl = ({
  size = 'medium',
  items,
  value,
  testID,
  style,
  onItemPress,
}: SegmentedControlProps) => {
  return (
    <StyledSegmentedControlWrapper
      themeSize={size}
      testID={testID}
      style={style}
    >
      {items.map((item) => (
        <SegmentedItem
          {...item}
          key={item.value}
          selected={item.value === value}
          onPress={() => onItemPress(item)}
          size={size}
        />
      ))}
    </StyledSegmentedControlWrapper>
  );
};

export default SegmentedControl;