import { Image } from 'expo-image';
import type { ComponentProps } from 'react';
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { StatusBadge } from './status-badge';

interface ActivityCardProps {
  avatarUri?: string;
  name: string;
  loanType: string;
  time: string;
  description: string;
  badgeText: string;
  badgeVariant?: ComponentProps<typeof StatusBadge>['variant'];
  onPress?: () => void;
}

/**
 * 动态卡片 — 展示客户最近操作动态
 * 采用浅底色和细边框，避免阴影带来的悬浮感。
 */
export function ActivityCard({
  avatarUri,
  name,
  loanType,
  time,
  description,
  badgeText,
  badgeVariant = 'secondary',
  onPress,
}: ActivityCardProps) {
  return (
    <Pressable
      onPress={onPress}
      className="bg-surface-container-lowest border border-outline-variant p-4 rounded-xl flex-row items-center gap-4"
    >
      {/* 头像 */}
      <View className="w-12 h-12 rounded-full overflow-hidden bg-surface-container">
        {avatarUri ? (
          <Image source={{ uri: avatarUri }} className="w-full h-full" contentFit="cover" />
        ) : (
          <View className="w-full h-full bg-secondary-container items-center justify-center">
            <Text className="text-on-secondary-container font-bold">{name[0]}</Text>
          </View>
        )}
      </View>
      {/* 正文 */}
      <View className="flex-1">
        <View className="flex-row justify-between items-start mb-1">
          <Text className="font-bold text-on-surface" numberOfLines={1}>
            {name} - {loanType}
          </Text>
          <Text className="text-[10px] text-on-surface-variant ml-2">{time}</Text>
        </View>
        <Text className="text-xs text-on-surface-variant" numberOfLines={1}>
          {description}
        </Text>
      </View>
      {/* 状态 */}
      <StatusBadge text={badgeText} variant={badgeVariant} />
    </Pressable>
  );
}