'use client'

import React from 'react'
import { YStack, XStack, Text } from 'tamagui'
import { StatusBadge } from './StatusBadge'
import type { EscrowAccountWithPda } from '@descro/sdk'
import { lamportsToSolString } from '@/util/lamports'
function truncAddr(addr: string): string {
  return `${addr.slice(0, 4)}…${addr.slice(-4)}`
}

interface EscrowCardProps {
  item: EscrowAccountWithPda
  selected: boolean
  onSelect: () => void
}

export function EscrowCard({ item, selected, onSelect }: EscrowCardProps) {
  const { pda, account } = item
  const solAmount = lamportsToSolString(account.amount, 4)

  return (
    <YStack
      padding="$4"
      borderRadius="$4"
      borderWidth={1}
      borderColor={selected ? '$blue9' : '$borderColor'}
      backgroundColor={selected ? '$blue2' : '$background'}
      pressStyle={{ opacity: 0.8 }}
      onPress={onSelect}
      cursor="pointer"
      gap="$2"
    >
      <XStack justifyContent="space-between" alignItems="center">
        <Text fontSize={12} color="$color11">
          #{account.escrowId.toString()}
        </Text>
        <StatusBadge state={account.state} />
      </XStack>

      <Text fontSize={16} fontWeight="700">
        {solAmount} SOL
      </Text>

      <XStack gap="$4">
        <YStack>
          <Text fontSize={11} color="$color10">Seller</Text>
          <Text fontSize={12} fontFamily="monospace">{truncAddr(account.seller)}</Text>
        </YStack>
        <YStack>
          <Text fontSize={11} color="$color10">Buyer</Text>
          <Text fontSize={12} fontFamily="monospace">{truncAddr(account.buyer)}</Text>
        </YStack>
      </XStack>

      <Text fontSize={11} color="$color10" fontFamily="monospace">
        PDA: {truncAddr(pda)}
      </Text>
    </YStack>
  )
}