import type {ReactNode} from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import type {BottomTabBarProps} from '@react-navigation/bottom-tabs';

export interface TabBarItem {
  key: string;
  label: string;
  icon: ReactNode;
  badge?: number;
}

export interface CurvedTabBarProps extends BottomTabBarProps {
  /**
   * Custom color for the tab bar background
   * @default '#FFFFFF'
   */
  backgroundColor?: string;

  /**
   * Custom color for the stroke outline of the tab bar
   * @default 'rgba(0,0,0,0.05)'
   */
  strokeColor?: string;

  /**
   * Custom stroke width for the tab bar outline
   * @default 0.5
   */
  strokeWidth?: number;

  /**
   * Height of the tab bar in pixels
   * @default 80
   */
  tabBarHeight?: number;

  /**
   * Whether to show a floating action button (FAB) in the center
   * @default true
   */
  showFAB?: boolean;

  /**
   * Size of the floating action button
   * @default 60
   */
  fabSize?: number;

  /**
   * Custom color for the floating action button
   * @default '#00C09A'
   */
  fabColor?: string;

  /**
   * Icon to display in the floating action button
   */
  fabIcon?: ReactNode;

  /**
   * Function to call when the floating action button is pressed
   */
  onFabPress?: () => void;

  /**
   * Height of the curve in the tab bar (0 = flat)
   * @default 14
   */
  curveHeight?: number;

  /**
   * Enable debug mode to see shape control points
   * @default false
   */
  debug?: boolean;

  /**
   * Index of the tab that should contain the floating action button
   * @default 2 (middle tab)
   */
  fabTabIndex?: number;

  /**
   * Custom styling for the tab bar container
   */
  style?: StyleProp<ViewStyle>;

  /**
   * Custom styling for the floating action button
   */
  fabStyle?: StyleProp<ViewStyle>;

  /**
   * Whether to animate the tab bar on mount
   * @default true
   */
  animateOnMount?: boolean;
}