"use client"

/*
 * File: IconContainer.tsx
 * Description: Reusable icon container component for onboarding screens.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import type React from "react"
import { View, StyleSheet } from "react-native"
import Icon from "react-native-vector-icons/Feather"
import { Colors, Spacing } from "../../../../shared/src/theme"

interface IconContainerProps {
  iconName: string
  iconSize?: number
  containerSize?: number
  backgroundColor?: string
  iconColor?: string
}

const IconContainer: React.FC<IconContainerProps> = ({
  iconName,
  iconSize = 32,
  containerSize = 80,
  backgroundColor = Colors.inputBackground,
  iconColor = Colors.primary,
}) => {
  return (
    <View style={styles.container}>
      <View
        style={[
          styles.iconWrapper,
          {
            width: containerSize,
            height: containerSize,
            borderRadius: containerSize * 0.25,
            backgroundColor,
          },
        ]}
      >
        <Icon name={iconName} size={iconSize} color={iconColor} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    marginBottom: Spacing.xl,
  },
  iconWrapper: {
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: Colors.border,
    shadowColor: Colors.backButtonShadow,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
})

export default IconContainer

/*
 * End of File: IconContainer.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */