import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useColors } from "@/hooks/useColors";

type PostStatus = "QUEUE" | "PUBLISHED" | "ERROR" | "DRAFT";

interface StatusBadgeProps {
  status: PostStatus;
}

export function StatusBadge({ status }: StatusBadgeProps) {
  const colors = useColors();

  const config: Record<PostStatus, { bg: string; text: string; label: string }> = {
    QUEUE: { bg: colors.warning + "25", text: colors.warning, label: "Queue" },
    PUBLISHED: { bg: colors.success + "25", text: colors.success, label: "Published" },
    ERROR: { bg: colors.error + "25", text: colors.error, label: "Error" },
    DRAFT: { bg: colors.muted, text: colors.mutedForeground, label: "Draft" },
  };

  const { bg, text, label } = config[status] ?? config.DRAFT;

  return (
    <View style={[styles.badge, { backgroundColor: bg }]}>
      <View style={[styles.dot, { backgroundColor: text }]} />
      <Text style={[styles.label, { color: text }]}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 20,
    gap: 4,
  },
  dot: {
    width: 5,
    height: 5,
    borderRadius: 3,
  },
  label: {
    fontSize: 11,
    fontFamily: "Inter_600SemiBold",
    letterSpacing: 0.3,
  },
});