import Feather from '@expo/vector-icons/Feather'
import { VideoView } from 'expo-video'
import { useScopedPlayer } from 'src/hooks/playback/useScopedPlayer'
import { ICON } from 'src/lib/icons'
import { View, ZStack } from 'tamagui'

type Props = {
  uri: string
  width?: number
  height?: number
  borderRadius?: number
}

// Muted looping preview for composer thumbnails. Unlike feed VideoPlayer,
// this plays unconditionally and never claims the audio arbiter — a
// composer rail can have multiple thumbs all muted-looping at once.
// `mode: 'composer'` in useScopedPlayer encodes that policy; the local
// URI doubles as the videoId since composer thumbs aren't keyed against
// remote post ids.
export default function VideoThumb({
  uri,
  width = 120,
  height = 200,
  borderRadius = 10,
}: Props) {
  const { player } = useScopedPlayer({
    source: { uri },
    videoId: uri,
    mode: 'composer',
  })

  return (
    <ZStack w={width} h={height}>
      <View
        style={{
          width,
          height,
          borderRadius,
          overflow: 'hidden',
          backgroundColor: '#000',
        }}
      >
        <VideoView
          player={player}
          style={{ width: '100%', height: '100%' }}
          contentFit="cover"
          nativeControls={false}
        />
      </View>
      <View
        position="absolute"
        top={6}
        right={6}
        px={5}
        py={3}
        borderRadius={10}
        bg="black"
        opacity={0.55}
        alignItems="center"
        justifyContent="center"
      >
        <Feather name="video" size={ICON.xs} color="white" />
      </View>
    </ZStack>
  )
}
