import { useTheme } from "../../theme";
import React from "react";
import { View, StyleSheet, ViewStyle, DimensionValue } from "react-native";

interface SkeletonElementProps {
  width?: DimensionValue
  height?: DimensionValue;
  borderRadius?: number;
  style?: ViewStyle;
  children?: React.ReactNode; 
}

const SkeletonElement: React.FC<SkeletonElementProps> = ({
  width,
  height,
  borderRadius,
  style,
  children,
}) => {
  const { theme } = useTheme();

  const styles = StyleSheet.create({
    skeleton: {
      backgroundColor: theme.skeletonItemColor,
      width: width,
      height: height,
      borderRadius: borderRadius,
    },
  });

  return <View style={[styles.skeleton, style]}>{children}</View>;
};

export default SkeletonElement;