import React, {memo} from 'react';
import {View} from 'react-native';
import {SharedValue} from 'react-native-reanimated';
import {AnimatedWaveForm, Typography} from '@components';
import {SPACING} from '@shared/theme';

import {styles} from './styles';

interface Props {
  time: string;
  normalizedBarsHeights: SharedValue<number[]>;
}

function VoiceRecordingInfo({time, normalizedBarsHeights}: Props) {
  return (
    <View style={styles.info}>
      <Typography style={styles.time} variant="xs">
        {time}
      </Typography>
      <View style={styles.waveform}>
        <AnimatedWaveForm
          maxBarHeight={SPACING.x3}
          containerHeight={SPACING.x3}
          normalizedBarsHeights={normalizedBarsHeights}
        />
      </View>
    </View>
  );
}

export default memo(VoiceRecordingInfo);
