import { View, Text, TouchableOpacity } from 'react-native';
import { useColors } from '../../lib/theme';

type Props = {
  postsCount: number;
  followersCount: number;
  approvedDomainsCount: number;
  onPostsPress?: () => void;
  onFollowersPress?: () => void;
  onApprovedDomainsPress?: () => void;
};

type CardProps = {
  value: string;
  label: string;
  onPress?: () => void;
};

function StatPill({ value, label, onPress }: CardProps) {
  const colors = useColors();
  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.6}
    >
      <View
        style={{
          backgroundColor: colors.card,
          borderWidth: 1,
          borderColor: colors.border,
          borderRadius: 999,
          paddingVertical: 10,
          paddingHorizontal: 18,
          alignItems: 'center',
          minWidth: 88,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.05,
          shadowRadius: 2,
          elevation: 1,
        }}
      >
        <Text
          style={{
            fontSize: 18,
            color: colors.text,
            fontFamily: 'Nunito_700Bold',
            letterSpacing: -0.2,
          }}
        >
          {value}
        </Text>
        <Text
          style={{
            marginTop: 1,
            fontSize: 10,
            color: colors.textMuted,
            fontFamily: 'Nunito_600SemiBold',
            textAlign: 'center',
          }}
          numberOfLines={1}
        >
          {label}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

export function StatsBar({
  postsCount,
  followersCount,
  approvedDomainsCount,
  onPostsPress,
  onFollowersPress,
  onApprovedDomainsPress,
}: Props) {
  return (
    <View style={{ paddingHorizontal: 16 }}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 10,
          flexWrap: 'wrap',
        }}
      >
        <StatPill value={String(postsCount)} label="Posts" onPress={onPostsPress} />
        <StatPill value={String(followersCount)} label="Follower" onPress={onFollowersPress} />
        <StatPill
          value={String(approvedDomainsCount)}
          label="Domains"
          onPress={onApprovedDomainsPress}
        />
      </View>
    </View>
  );
}