import React from 'react';
import {View, StyleSheet} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconPlayerPlay} from '@tabler/icons-react-native';
import {SPACING, useTheme} from '@shared/theme';

interface Props {
  size?: 'lg' | 'md' | 'sm';
}

const ICON_SIZES = {
  lg: 'x8',
  md: 'x6',
  sm: 'x4',
} as const;

export function IconPlayVideo({size = 'md'}: Props) {
  const {theme, iconSizes} = useTheme();
  const {t} = useTranslation();

  return (
    <View
      pointerEvents="none"
      style={[
        styles.playVideoButton,
        styles[size],
        {backgroundColor: theme.background.elements.grey},
      ]}
      accessibilityLabel={t('attachments.play')}>
      <IconPlayerPlay
        size={iconSizes[ICON_SIZES[size]]}
        color={theme.text.neutral.default}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  playVideoButton: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
  },
  lg: {
    width: SPACING.x8,
    height: SPACING.x8,
    borderRadius: SPACING.x8,
  },
  md: {
    width: SPACING.x4,
    height: SPACING.x4,
    borderRadius: SPACING.x4,
  },
  sm: {
    width: SPACING.x3,
    height: SPACING.x3,
    borderRadius: SPACING.x3,
  },
});