import { Feather } from "@expo/vector-icons";
import { Image } from "expo-image";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useColors } from "@/hooks/useColors";
import { PostizIntegration } from "@/context/PostizContext";

interface ChannelChipProps {
  integration: PostizIntegration;
  selected: boolean;
  onToggle: () => void;
}

export function ChannelChip({ integration, selected, onToggle }: ChannelChipProps) {
  const colors = useColors();

  return (
    <TouchableOpacity
      onPress={onToggle}
      activeOpacity={0.7}
      style={[
        styles.chip,
        {
          backgroundColor: selected ? colors.primary + "20" : colors.card,
          borderColor: selected ? colors.primary : colors.border,
        },
      ]}
    >
      {integration.picture ? (
        <Image
          source={{ uri: integration.picture }}
          style={styles.avatar}
          contentFit="cover"
        />
      ) : (
        <View style={[styles.avatarFallback, { backgroundColor: colors.secondary }]}>
          <Feather name="globe" size={12} color={colors.mutedForeground} />
        </View>
      )}
      <Text
        style={[
          styles.name,
          { color: selected ? colors.primary : colors.foreground },
        ]}
        numberOfLines={1}
      >
        {integration.name}
      </Text>
      {selected && (
        <Feather name="check" size={12} color={colors.primary} />
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  chip: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 20,
    borderWidth: 1,
    gap: 6,
    maxWidth: 150,
  },
  avatar: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  avatarFallback: {
    width: 20,
    height: 20,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  name: {
    fontSize: 12,
    fontFamily: "Inter_500Medium",
    flexShrink: 1,
  },
});