import React from 'react';
import {
  requireNativeComponent,
  UIManager,
  Platform,
  View,
  StyleSheet,
  type ViewStyle,
  type ViewProps,
} from 'react-native';

const LINKING_ERROR =
  `The package 'react-native-svg-renderer' doesn't seem to be linked. Make sure: \n\n` +
  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
  '- You rebuilt the app after installing the package\n' +
  '- You are not using Expo Go\n';

type SvgRendererProps = {
  xml: string;
  style: ViewStyle;
};

const ComponentName = 'SvgRendererView';

const isLegacy = typeof UIManager.getViewManagerConfig === 'undefined';

export const SvgRendererView =
  isLegacy || UIManager.getViewManagerConfig(ComponentName) != null
    ? requireNativeComponent<SvgRendererProps>(ComponentName)
    : () => {
        throw new Error(LINKING_ERROR);
      };

export const SvgView = (props: ViewProps & SvgRendererProps) => {
  const { xml, style, ...rest } = props;
  return (
    <View {...rest} style={[{ overflow: 'hidden' }, style]}>
      <SvgRendererView xml={xml} style={StyleSheet.absoluteFillObject} />
    </View>
  );
};

export default SvgView;