import React from 'react';
import Reanimated, {
  SharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {Pressable, StyleSheet} from 'react-native';
import Icon from '@components/Icon';
import {COLORS} from '@shared/colors';
import {BORDER_RADIUS} from '@shared/theme';

interface Props {
  drag: SharedValue<number>;
}

export function SwipeActionMessage({drag}: Props) {
  const styleAnimation = useAnimatedStyle(() => {
    return {
      transform: [{translateX: drag.value - 40}],
    };
  });

  return (
    <Reanimated.View style={[styles.container, styleAnimation]}>
      <Pressable style={styles.button}>
        <Icon name="reply" size="sm" />
      </Pressable>
    </Reanimated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    justifyContent: 'center',
    width: 40,
    alignItems: 'flex-start',
  },
  button: {
    backgroundColor: COLORS.GRAY,
    width: 28,
    height: 28,
    borderRadius: BORDER_RADIUS.m,
    alignItems: 'center',
    justifyContent: 'center',
  },
});