import { styled, Text, View } from 'tamagui'

// MediaBadge — the small opaque-black/white overlay tag used on composer
// media thumbnails ("ALT", "RESIZED", "COMPRESSED"). The colours are
// intentionally NOT themed: these badges sit on top of user photos and need
// the same contrast regardless of light/dark, matching platform conventions
// for media overlays.

const MediaBadgeRoot = styled(View, {
  name: 'MediaBadge',
  position: 'absolute',
  opacity: 0.55,
  py: 3,
  px: 5,
  borderRadius: 10,
  backgroundColor: 'black',
  justifyContent: 'center',
  alignItems: 'center',
  variants: {
    corner: {
      topLeft: { top: 0, left: 0, margin: 3 },
      bottomLeft: { bottom: 0, left: 0, margin: 3 },
      topRight: { top: 0, right: 0, margin: 3 },
      bottomRight: { bottom: 0, right: 0, margin: 3 },
    },
  } as const,
  defaultVariants: {
    corner: 'topLeft',
  },
})

const MediaBadgeText = styled(Text, {
  name: 'MediaBadgeText',
  fontWeight: 'bold',
  color: 'white',
  fontSize: 8,
  allowFontScaling: false,
})

export function MediaBadge({
  text,
  corner,
}: {
  text: string
  corner?: 'topLeft' | 'bottomLeft' | 'topRight' | 'bottomRight'
}) {
  return (
    <MediaBadgeRoot corner={corner}>
      <MediaBadgeText>{text}</MediaBadgeText>
    </MediaBadgeRoot>
  )
}
