import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import { useTheme } from '../../theme';
import Box from '../Box';
import { DEFAULT_ILLUSTRATION_SIZE } from './constants';
import { Illustrations, type IllustrationName } from './illustrations';

export { IllustrationList } from './illustrations';
export type { IllustrationName } from './illustrations';

interface IllustrationProps {
  /**
   * The name of the illustration to display
   */
  name: IllustrationName;
  /**
   * Testing ID for the component
   */
  testID?: string;
  /**
   * Width of the illustration
   */
  width?: number;
  /**
   * Height of the illustration
   */
  height?: number;
  /**
   * Style of the illustration
   */
  style?: StyleProp<ViewStyle>;
}

const Illustration = ({
  name,
  testID,
  width = DEFAULT_ILLUSTRATION_SIZE,
  height = DEFAULT_ILLUSTRATION_SIZE,
  style,
}: IllustrationProps) => {
  const IllustrationComponent = Illustrations[name];
  const theme = useTheme();

  const defaultStroke = theme.colors.primary;
  const defaultFill = theme.colors.decorativeSecondarySurface;

  if (!IllustrationComponent) {
    return null;
  }

  return (
    <Box style={style}>
      <IllustrationComponent
        stroke={defaultStroke}
        fill={defaultFill}
        width={width}
        height={height}
        testID={testID}
      />
    </Box>
  );
};

export default Illustration;