// Dependencies:
// * https://www.npmjs.com/package/react-native-gesture-handler
import React from 'react';
import { View, Text, Image } from 'react-native';
import { classNames } from '../utils';
import { ViewProps } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';

export interface NotificationCardProps extends ViewProps {
  id: string;
  image: string;
  title: string;
  isNew?: boolean;
  description?: string;
  time: string;
  className?: string;
  renderRightActions?: (dragX) => React.ReactNode;
  onSwipe?: () => void;
}

export const NotificationCard: React.FC<NotificationCardProps> = ({
  image,
  title,
  isNew = true,
  description,
  time,
  renderRightActions,
  onSwipe,
  ...restOfProps
}) => {
  const handleSwipe = () => {
    if (onSwipe) {
      onSwipe();
    }
  };

  return (
    <View {...restOfProps}>
      <Swipeable
        renderRightActions={renderRightActions}
        onSwipeableRightOpen={handleSwipe}
      >
        <View className={classNames('flex items-center flex-row w-full')}>
          {isNew && <View className="w-2 h-2 rounded-full mr-4 bg-brand-500" />}
          <Image
            className="w-12 h-12 rounded-full mr-2 object-cover"
            source={{
              uri: image,
            }}
          />
          <View className="flex-1">
            <View className="flex flex-row items-center justify-between mb-1">
              <Text className="font-poppins-medium">{title}</Text>
              <Text className="font-poppins-regular text-small-paragraph text-black">
                {time}
              </Text>
            </View>
            <Text className="font-poppins-light text-small-paragraph text-neutral-700">
              {description}
            </Text>
          </View>
        </View>
      </Swipeable>
    </View>
  );
};