import {

  StyleSheet,

  View,

  type StyleProp,

  type ViewStyle,

} from 'react-native';

import { Text } from '@/components/ui/Text';

// Badge color palettes

export const badgeVariants = {

  green:  { bg: "#d4f5e2", text: "#1a7a48", dot: "#34c272" },

  blue:   { bg: "#dbeafe", text: "#1d4ed8", dot: "#3b82f6" },

  yellow: { bg: "#fef9c3", text: "#854d0e", dot: "#eab308" },

  red:    { bg: "#fee2e2", text: "#991b1b", dot: "#ef4444" },

  purple: { bg: "#ede9fe", text: "#5b21b6", dot: "#8b5cf6" },

  gray:   { bg: "#f1f5f9", text: "#475569", dot: "#94a3b8" },

  orange: { bg: "#ffedd5", text: "#9a3412", dot: "#f97316" },

  pink:   { bg: "#fce7f3", text: "#9d174d", dot: "#ec4899" },

  indigo: { bg: "#e0e7ff", text: "#3730a3", dot: "#6366f1" },

};

export type BadgeVariant = keyof typeof badgeVariants;

type BadgeProps = {

  label: string;

  variant?: BadgeVariant;

  style?: StyleProp<ViewStyle>;

};

// TODO: Add a subtle variant and allow to drop the dot as well

// TODO: Experiment with a less round-ish version?

export const Badge = ({ label, variant = "green", style }: BadgeProps) => {

  const palette = badgeVariants[variant] ?? badgeVariants.green;

  const styles = StyleSheet.create({

    badge: {

      flexDirection: "row",

      alignItems: "center",

      gap: 5,

      paddingVertical: 5,

      paddingHorizontal: 12,

      borderRadius: 999,

      flexShrink: 0,

    },

    badgeDot: {

      width: 7,

      height: 7,

      borderRadius: 4,

    },

    badgeText: {

      fontSize: 13,

      fontWeight: "600",

      letterSpacing: 0.1,

    }

  });

  return (

    <View style={[styles.badge, { backgroundColor: palette.bg }, style]}>

      <View style={[styles.badgeDot, { backgroundColor: palette.dot }]} />

      <Text style={[styles.badgeText, { color: palette.text }]}>{label}</Text>

    </View>

  );

}