import React from 'react'
import { Linking, View, StyleSheet, TouchableOpacity } from 'react-native'
import { colors } from '../Colors'
import PlayIcon from '../icons/Play'

export const PlayButton: React.FC<{
  url: string
  width?: number
  height?: number
  padding?: number
}> = ({ url, width, height, padding }) => (
  <View
    style={{
      position: 'absolute',
      top: padding,
      bottom: padding,
      left: padding,
      right: padding,
      width: width ?? 64,
      height: height ?? 64,
    }}
  >
    <TouchableOpacity
      onPress={() => Linking.openURL(url)}
      style={{
        ...StyleSheet.absoluteFillObject,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <PlayIcon stroke={colors.white} />
    </TouchableOpacity>
  </View>
)