import cn from 'classnames';
import React, { FC } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

export type MenuListItem = {
  title: string;
  subtitle?: string;
  icon?: React.ReactNode;
  disabled?: boolean;
  onPress: () => void;
};

type props = {
  items?: MenuListItem[];
  classNames?: string;
};

const MenuList: FC<props> = ({ items, classNames }) => (
  <View
    className={cn(
      classNames,
      { 'p-2': items && items?.length > 1 },
      'space-y-2 rounded bg-secondary-bg',
    )}
  >
    {items?.map((item, index) => (
      <TouchableOpacity
        disabled={item.disabled}
        key={index}
        className="p-3"
        onPress={() => item.onPress()}
      >
        <View className={cn({ 'opacity-50': item?.disabled }, 'flex-row items-center space-x-3')}>
          <Text className="text-secondary">{item.icon}</Text>
          <View>
            <Text
              className={cn(
                'font-panton text-md font-bold',
                item.icon ? 'text-primary' : 'text-secondary',
              )}
            >
              {item.title}
            </Text>
            {item.subtitle && <Text className="text-sm">{item.subtitle}</Text>}
          </View>
        </View>
      </TouchableOpacity>
    ))}
  </View>
);

export default MenuList;
