import * as React from 'react';
import { View } from 'react-native';
import Text from './text';
import Badge from './badge';

interface MenuItemProps {
  activeIcon: React.ReactNode;
  idleIcon: React.ReactNode;
  menuTitle: string;
  selected: boolean;
  badge?: {
    variant: 'dot' | 'new' | 'number';
    count?: number;
  };
}

const MenuItem = ({
  activeIcon,
  idleIcon,
  menuTitle,
  selected,
  badge,
}: MenuItemProps) => {
  return (
    <View className="justify-center items-center gap-[4px]">
      <View className="relative">
        {selected ? activeIcon : idleIcon}
        {badge && badge.variant === 'dot' && (
          <Badge variant={'dot'} color={'red'} />
        )}
        {badge && badge.variant === 'new' && (
          <Badge variant={'new'} color={'red'} size={'medium'} />
        )}
        {badge && badge.variant === 'number' && (
          <Badge
            variant={'number'}
            color={'red'}
            size="small"
            count={badge.count}
          />
        )}
      </View>
      {menuTitle && (
        <Text
          face={'caption'}
          weight={'bold'}
          size={'xsmall'}
          textColor={selected ? 'gray-900' : 'gray-400'}
        >
          {menuTitle}
        </Text>
      )}
    </View>
  );
};

export default MenuItem;