import React from "react";
import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography";

type BadgeVariant =
  | "neutral"
  | "success"
  | "warning"
  | "danger"
  | "info"
  | "primary";
type BadgeSize = "sm" | "md" | "lg";

interface BadgeProps {
  label: string;
  variant?: BadgeVariant;
  size?: BadgeSize;
  style?: StyleProp<ViewStyle>;
  emoji?: string;
}

export function Badge({
  label,
  variant = "neutral",
  size = "md",
  style,
  emoji,
}: BadgeProps) {
  const { colors } = useTheme();

  const sizeStyles = {
    sm: {
      paddingVertical: 6,
      paddingHorizontal: 12,
      fontSize: fontSize.xs,
    },
    md: {
      paddingVertical: 8,
      paddingHorizontal: 14,
      fontSize: fontSize.sm,
    },
    lg: {
      paddingVertical: 10,
      paddingHorizontal: 18,
      fontSize: fontSize.base,
    },
  };

  const variantStyles: Record<
    BadgeVariant,
    { backgroundColor: string; color: string }
  > = {
    neutral: {
      backgroundColor: colors.surfaceElevated,
      color: colors.textSecondary,
    },
    success: {
      backgroundColor: colors.success,
      color: colors.white,
    },
    warning: {
      backgroundColor: colors.warning,
      color: colors.black,
    },
    danger: {
      backgroundColor: colors.danger,
      color: colors.white,
    },
    info: {
      backgroundColor: colors.info,
      color: colors.white,
    },
    primary: {
      backgroundColor: colors.primary,
      color: colors.white,
    },
  };

  return (
    <View
      style={[
        styles.badge,
        {
          backgroundColor: variantStyles[variant].backgroundColor,
          paddingVertical: sizeStyles[size].paddingVertical,
          paddingHorizontal: sizeStyles[size].paddingHorizontal,
        },
        style,
      ]}
    >
      <Text
        style={[
          styles.label,
          {
            color: variantStyles[variant].color,
            fontSize: sizeStyles[size].fontSize,
            fontWeight: fontWeight.bold,
          },
        ]}
      >
        {emoji && `${emoji} `}
        {label}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    borderRadius: 12,
    alignSelf: "flex-start",
  },
  label: {
    textAlign: "center",
  },
});