import React from 'react';
import {View} from 'react-native';
import {IconPlayerPlayFilled} from '@tabler/icons-react-native';
import {Pressable} from '@components/_core/Pressable';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  disabled: boolean;
  isSmall?: boolean;
  onPress: () => void;
  show: boolean;
}

export function PlayButton({disabled, isSmall, onPress, show}: Props) {
  const {iconSizes, theme} = useTheme();

  return show ? (
    <View style={styles.container}>
      <Pressable
        disabled={disabled}
        onPress={onPress}
        style={styles.contentContainer}>
        <IconPlayerPlayFilled
          fill={theme.text.neutral.inverted}
          color={theme.text.neutral.inverted}
          size={isSmall ? iconSizes.x6 : iconSizes.x12}
        />
      </Pressable>
    </View>
  ) : null;
}
