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

type IconContainerVariant = "plain" | "subtle" | "colored";
type IconContainerSize = "sm" | "md" | "lg";

interface IconContainerProps {
  children: React.ReactNode;
  variant?: IconContainerVariant;
  size?: IconContainerSize;
  backgroundColor?: string;
  style?: StyleProp<ViewStyle>;
}

/**
 * IconContainer - Clean container for icons with subtle backgrounds
 *
 * Variants:
 * - plain: No background, just the icon
 * - subtle: Light background (surfaceSecondary)
 * - colored: Custom background color (pass backgroundColor prop)
 *
 * Sizes:
 * - sm: 32px circle
 * - md: 40px circle (default)
 * - lg: 48px circle
 */
export function IconContainer({
  children,
  variant = "subtle",
  size = "md",
  backgroundColor,
  style,
}: IconContainerProps) {
  const { colors } = useTheme();

  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
    sm: {
      width: 32,
      height: 32,
      borderRadius: 16,
    },
    md: {
      width: 40,
      height: 40,
      borderRadius: 20,
    },
    lg: {
      width: 48,
      height: 48,
      borderRadius: 24,
    },
  };

  const getBackgroundColor = (): string | undefined => {
    if (variant === "colored" && backgroundColor) {
      return backgroundColor;
    }
    if (variant === "subtle") {
      return colors.surfaceElevated;
    }
    return "transparent";
  };

  return (
    <View
      style={[
        styles.container,
        sizeStyles[size],
        { backgroundColor: getBackgroundColor() },
        style,
      ]}
    >
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
  },
});
