import { memo } from 'react';
import ContentLoader, { Rect, Circle } from 'react-content-loader/native';
import { getSkeletonBackgrounColor } from '../../../../core/utils/color';
import { SafeAreaView } from 'react-native-safe-area-context';
const CategoryListSkeleton = ({
  themeStyle,
  amount = 4
}) => {
  const {
    backgroundColor,
    foregroundColor
  } = getSkeletonBackgrounColor(themeStyle);
  const itemHeight = 60; // Height for each item (circle + rect)
  const circleSize = 40; // Circle diameter

  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(ContentLoader, {
    height: 400,
    width: 400,
    speed: 1,
    viewBox: "0 0 400 400",
    backgroundColor: backgroundColor,
    foregroundColor: foregroundColor
  }, Array.from({
    length: amount
  }, (_, index) => {
    const yPosition = index * itemHeight;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, {
      cx: 15,
      cy: yPosition + circleSize / 2,
      r: circleSize / 2
    }), /*#__PURE__*/React.createElement(Rect, {
      x: 60,
      y: yPosition + (circleSize - 10) / 2 // Center vertically with circle
      ,
      rx: "4",
      ry: "4",
      width: "140",
      height: "10"
    }));
  })));
};
export default /*#__PURE__*/memo(CategoryListSkeleton);
//# sourceMappingURL=CategoryListSkeleton.js.map