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" | "xl";

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

export function IconContainer({
  children,
  variant = "subtle",
  size = "md",
  backgroundColor,
  style,
}: IconContainerProps) {
  const { colors } = useTheme();

  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
    sm: {
      width: 36,
      height: 36,
      borderRadius: 10,
    },
    md: {
      width: 48,
      height: 48,
      borderRadius: 14,
    },
    lg: {
      width: 56,
      height: 56,
      borderRadius: 16,
    },
    xl: {
      width: 64,
      height: 64,
      borderRadius: 18,
    },
  };

  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",
  },
});